I could not use MaterialModule #52

luke-emmental · 2017-06-20T03:24:16Z

 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?

The text was updated successfully, but these errors were encountered:

thymikee · 2017-06-20T07:58:08Z

You're probably hitting this: jestjs/jest#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"
}

luke-emmental · 2017-06-21T03:17:57Z

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

thymikee · 2017-06-21T06:19:20Z

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

luke-emmental · 2017-06-21T06:54:04Z

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;

thymikee · 2017-06-21T06:59:08Z

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.

luke-emmental · 2017-06-21T09:26:20Z

Thanks @thymikee . I will try.

michahell · 2017-06-22T14:06:53Z

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

thymikee · 2017-06-23T09:18:16Z

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

michahell · 2017-06-27T15:21:09Z

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 🤔

ollwenjones · 2017-06-27T20:51:40Z

Same deal here.

ollwenjones · 2017-06-27T21:17:44Z

adding

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

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

michahell · 2017-06-28T10:04:06Z

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

zack9433 · 2017-07-28T09:25:18Z

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

thymikee · 2017-07-28T09:32:18Z

@zack9433 nice! Thank you for sharing :)

thymikee · 2017-07-28T09:33:18Z

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

michahell · 2017-07-28T09:33:33Z

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

michahell · 2017-07-28T09:43:34Z

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"

zack9433 · 2017-07-31T03:21:18Z

@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

thymikee · 2017-08-04T09:25:50Z

Fixed with #61

denniske · 2017-09-18T13:04:49Z

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

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

thymikee closed this as completed Aug 4, 2017

DorianGrey mentioned this issue Aug 21, 2017

Can not run unit tests through jest framework because of SyntaxError: Unexpected token export #66

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

I could not use MaterialModule #52

I could not use MaterialModule #52

luke-emmental commented Jun 20, 2017 •

edited

Loading

thymikee commented Jun 20, 2017

luke-emmental commented Jun 21, 2017

thymikee commented Jun 21, 2017

luke-emmental commented Jun 21, 2017 •

edited

Loading

thymikee commented Jun 21, 2017

luke-emmental commented Jun 21, 2017 •

edited

Loading

michahell commented Jun 22, 2017 •

edited

Loading

thymikee commented Jun 23, 2017

michahell commented Jun 27, 2017

ollwenjones commented Jun 27, 2017

ollwenjones commented Jun 27, 2017

michahell commented Jun 28, 2017 •

edited

Loading

zack9433 commented Jul 28, 2017

thymikee commented Jul 28, 2017

thymikee commented Jul 28, 2017

michahell commented Jul 28, 2017

michahell commented Jul 28, 2017 •

edited

Loading

zack9433 commented Jul 31, 2017

thymikee commented Aug 4, 2017

denniske commented Sep 18, 2017

I could not use MaterialModule #52

I could not use MaterialModule #52

Comments

luke-emmental commented Jun 20, 2017 • edited Loading

thymikee commented Jun 20, 2017

luke-emmental commented Jun 21, 2017

thymikee commented Jun 21, 2017

luke-emmental commented Jun 21, 2017 • edited Loading

thymikee commented Jun 21, 2017

luke-emmental commented Jun 21, 2017 • edited Loading

michahell commented Jun 22, 2017 • edited Loading

thymikee commented Jun 23, 2017

michahell commented Jun 27, 2017

ollwenjones commented Jun 27, 2017

ollwenjones commented Jun 27, 2017

michahell commented Jun 28, 2017 • edited Loading

zack9433 commented Jul 28, 2017

thymikee commented Jul 28, 2017

thymikee commented Jul 28, 2017

michahell commented Jul 28, 2017

michahell commented Jul 28, 2017 • edited Loading

zack9433 commented Jul 31, 2017

thymikee commented Aug 4, 2017

denniske commented Sep 18, 2017

luke-emmental commented Jun 20, 2017 •

edited

Loading

luke-emmental commented Jun 21, 2017 •

edited

Loading

luke-emmental commented Jun 21, 2017 •

edited

Loading

michahell commented Jun 22, 2017 •

edited

Loading

michahell commented Jun 28, 2017 •

edited

Loading

michahell commented Jul 28, 2017 •

edited

Loading