Jest: Jest not working with react-css-modules

[grrseguin]

Hello,

When a ReactJS project is setting with Webpack, Jest not working with react-css-modules.

As you will see on my example the error below appears when this command is launched : npm run test.

> jest

Using Jest CLI v13.0.0, jasmine2, babel-jest
 FAIL  __tests__/Title-test.js (0s)
● Runtime Error
  - Error: Failed to get mock metadata: /Users/gseguin/Projects/jest-N-react-css-modules/node_modules/lodash/_root.js

    See: http://facebook.github.io/jest/docs/manual-mocks.html#content
        at Runtime._generateMock (node_modules/jest-runtime/build/index.js:426:15)
        at Runtime.requireMock (node_modules/jest-runtime/build/index.js:256:43)
        at Runtime.requireModuleOrMock (node_modules/jest-runtime/build/index.js:264:19)
        at Object.<anonymous> (node_modules/lodash/_coreJsData.js:1:131)
        at Runtime._execModule (node_modules/jest-runtime/build/index.js:352:17)
        at Runtime.requireModule (node_modules/jest-runtime/build/index.js:202:14)
        at Runtime._generateMock (node_modules/jest-runtime/build/index.js:418:34)
        at Runtime.requireMock (node_modules/jest-runtime/build/index.js:256:43)
        at Runtime.requireModuleOrMock (node_modules/jest-runtime/build/index.js:264:19)
        at Object.<anonymous> (node_modules/lodash/_isMasked.js:1:137)

Do you know how to avoid this error ?

[vvo]

Seems the automocking did not work well, you could try this in your test:

jest.unmock('react-css-modules');

or

jest.mock('react-css-modules', () => jest.fn());

[vvo]

Finally, see https://facebook.github.io/jest/docs/api.html#unmockedmodulepathpatterns-array-string

[cpojer]

There is literally a link there in the error message with an explanation. Also, what @vvo said.

[cpojer]

I also recommend to just disable automocking for all your tests. Try "automock": false in your config. It might be a better default.

[grrseguin]

Thanks, i have unmocked react-css-modules and updated my example.

But, the error above is now replaced by another one :

- SyntaxError: Unexpected token . in file 'src/components/Title.css'.

    Make sure your preprocessor is set up correctly and ensure your 'preprocessorIgnorePatterns' configuration is correct: http://facebook.github.io/jest/docs/api.html#preprocessorignorepatterns-array-string
    If you are currently setting up Jest or modifying your preprocessor, try `jest --no-cache`.
    Preprocessor: node_modules/babel-jest/build/index.js.
    Make sure your '.babelrc' is set up correctly, for example it should include the 'es2015' preset.
    Jest tried to the execute the following preprocessed code:
    .title {
      color: yellow;
    }

Jest try to parse the stylesheet which are imported in my component (like in the official example). Do you know how to prevent it ?

[cpojer]

See the moduleNameMapper in the documentation for how to use Jest with webpack.

http://facebook.github.io/jest/docs/tutorial-webpack.html#content

[vvo]

Ah nice!

[grrseguin]

OK it works ! Thanks for your help 👍 .

Just note that it's not possible to use the styleName property of react-css-modules.

  - Error: "<valueOfStyleName>" CSS module is undefined.
        at exports.default (node_modules/react-css-modules/dist/generateAppendClassName.js:40:23)
        at linkElement (node_modules/react-css-modules/dist/linkClass.js:71:65)
        at exports.default (node_modules/react-css-modules/dist/linkClass.js:108:12)
        at WrappedComponent.render (node_modules/react-css-modules/dist/extendReactClass.js:80:48)
        at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (node_modules/react/lib/ReactCompositeComponent.js:815:34)

Therefore, i used the css module property instead !?

I suppose that is an issue of react-css-modules.

[grrseguin]

To follow at react-css-modules's issue num 146.

[jtulk]

Is there any resolution to this issue? I'm currently stuck on it and am getting nowhere.

[jDeppen]

Updated link: http://facebook.github.io/jest/docs/en/webpack.html

http://facebook.github.io/jest/docs/tutorial-webpack.html#content