Jest-preset-angular: I could not use MaterialModule

Created on 20 Jun 2017  路  20Comments  路  Source: thymikee/jest-preset-angular 
 console.warn node_modules/@angular/material/bundles/material.umd.js:146
    Current document does not have a doctype. This may cause some Angular Material components not to behave as expected.

  console.warn node_modules/@angular/material/bundles/material.umd.js:159
    Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming


ReferenceError: CSS is not defined

What should i do?

picture luke-emmental
👍1

Most helpful comment

adding

Object.defineProperty(window, 'CSS', {value: mock()});

to my jestGlobalMocks.ts seems to have cleared up the CSS is not defined issue for me.

picture ollwenjones on 27 Jun 2017
👍6

All 20 comments

You're probably hitting this: https://github.com/facebook/jest/issues/3299
I'll be implementing new testEnvironment for this preset, so I can keep that in mind and add support for doctype. If you don't have time, you can create your own testEnvironment (copy-paste existing one and adjust it as I commented in mentioned issue)

Use it in your jest config like:

{
  "testEnvironment": "path/to/your/custom_test_env.js"
}
thymikee picture thymikee on 20 Jun 2017
👍1

thanks reply! It is harder than I thought. I'm trying

luke-emmental picture luke-emmental on 21 Jun 2017

Yea it's not a regular thing you do with Jest, but it's definitely possible to adjust :)

thymikee picture thymikee on 21 Jun 2017

I try it. but not working
vmDom.js

const _util = require('jest-util');
const FakeTimers = _util.FakeTimers, installCommonGlobals = _util.installCommonGlobals;
const mock = require('jest-mock');
const jsdom = require('jsdom');
const path = require('path');
const fs = require('fs');
const process = require('process');


const maincss = fs.readFileSync(path.normalize(`${path.parse(__dirname).dir}/node_modules/@angular/material/prebuilt-themes/indigo-pink.css`), 'utf8');
const vm = require('vm');

class JSDOMEnvironment {


  constructor(config) {
    this.browser = new jsdom.JSDOM(`<!DOCTYPE html><head></head><body></body><html>`, {
      features : {
        FetchExternalResources : ['script', 'style', 'link'],
        QuerySelector : true
      },
      url: config.testURL
    });

    const _global = (this.global = this.browser.window);


    const document = _global.document;
    let head = document.getElementsByTagName('head')[0];
    let style = document.createElement("style");
    style.type = 'text/css';
    style.innerHTML = maincss;
    head.appendChild(style);


    installCommonGlobals(_global, config.globals);

    this.moduleMocker = new mock.ModuleMocker(_global);
    this.fakeTimers = new FakeTimers(_global, this.moduleMocker, config);
  }

  dispose() {
    if (this.fakeTimers) {
      this.fakeTimers.dispose();
    }
    if (this.global) {
      this.global.close();
    }
    this.global = null;
    this.browser = null;
    this.fakeTimers = null;
  }

  runScript(script) {

    if (this.global) {

      return script.runInContext(vm.createContext(this.global));
    }
    return null;
  }
}
// new JSDOMEnvironment({testURL: 'https://github.com/letsrock-today/mock-local-storage'});

module.exports = JSDOMEnvironment;
luke-emmental picture luke-emmental on 21 Jun 2017

See how it's done here: https://github.com/Micromeritics/jest-environment-jsdom-11.0.0. You can also send them a PR and use it.

thymikee picture thymikee on 21 Jun 2017

Thanks @thymikee . I will try.

luke-emmental picture luke-emmental on 21 Jun 2017

Also hitting this, after first having hit the bug with merging moduleNameMapper from a preset + jest.config :( (seems to get fixed in https://github.com/facebook/jest/pull/3689# though).

michahell picture michahell on 22 Jun 2017

@luke-emmental can you send a PR to example in this repo with usage if Material module, so I can test new environment?

thymikee picture thymikee on 23 Jun 2017

Hmm. maybe there is a way to mock material components, seems like the material design guys would do that to test their own nested components 馃

michahell picture michahell on 27 Jun 2017

Same deal here.

ollwenjones picture ollwenjones on 27 Jun 2017

adding

Object.defineProperty(window, 'CSS', {value: mock()});

to my jestGlobalMocks.ts seems to have cleared up the CSS is not defined issue for me.

ollwenjones picture ollwenjones on 27 Jun 2017
👍6

nice @ollwenjones ! I can at least get JEST to pass a basic component spec using material design icons. I do still get the following warnings / errors:

console.warn node_modules/@angular/material/bundles/material.umd.js:146
    Current document does not have a doctype. This may cause some Angular Material components not to behave as expected.

  console.warn node_modules/@angular/material/bundles/material.umd.js:159
    Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming

  console.log node_modules/@angular/material/bundles/material.umd.js:13754
    Loading icon set URL: [object Object] failed: SyntaxError

  console.log node_modules/@angular/material/bundles/material.umd.js:14108
    Error retrieving icon: Unable to find icon with the name "security-outline"

which are probably still related to the Jsdom document type setting

michahell picture michahell on 28 Jun 2017

I add some mock

Object.defineProperty(document, 'doctype', {
  value: '<!DOCTYPE html>'
});
Object.defineProperty(window, 'getComputedStyle', {
  value: () => {
    return {
      display: 'none',
      appearance: ['-webkit-appearance']
    };
  }
});

and warning messages 

console.warn node_modules/@angular/material/bundles/material.umd.js:146
    Current document does not have a doctype. This may cause some Angular Material components not to behave as expected.

  console.warn node_modules/@angular/material/bundles/material.umd.js:159
    Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming

are gone

zack9433 picture zack9433 on 28 Jul 2017
👍2 👎1

@zack9433 nice! Thank you for sharing :)

thymikee picture thymikee on 28 Jul 2017

Would you mind adding PR to the example, so it's there by default?
https://github.com/thymikee/jest-preset-angular/blob/master/example/src/jestGlobalMocks.ts

thymikee picture thymikee on 28 Jul 2017

Awesome! going to try that right now, thanks for sharing @zack9433 !

michahell picture michahell on 28 Jul 2017

But I think this has the same effect as using the
{provide: MATERIAL_SANITY_CHECKS, useValue: false}, provider in your
TestBed.configureTestingModule() setup, no ?

I'm still getting the following warning types though:

console.log node_modules/@angular/material/bundles/material.umd.js:12149
Loading icon set URL: [object Object] failed: SyntaxError

console.log node_modules/@angular/material/bundles/material.umd.js:12485
Error retrieving icon: Unable to find icon with the name "security-outline"
michahell picture michahell on 28 Jul 2017

@thymikee sorry for lately reply. I already created a PR for this issue.
@michahell I think you can try to load a fake icon like this

zack9433 picture zack9433 on 31 Jul 2017

Fixed with https://github.com/thymikee/jest-preset-angular/pull/61

thymikee picture thymikee on 4 Aug 2017

I think the following is still missing in jestGlobalMocks.ts:

Object.defineProperty(window, 'CSS', {value: mock()});

denniske picture denniske on 18 Sep 2017
Was this page helpful?
0 / 5 - 0 ratings

Related issues

blackholegalaxy picture blackholegalaxy  路  6Comments
jesusbotella picture jesusbotella  路  8Comments
ilancohen picture ilancohen  路  7Comments
SrHuevo picture SrHuevo  路  6Comments
tsupka picture tsupka  路  6Comments