How to use jest with webpack?

Question

I use webpack to develop a React component. Here is a simple version of it:

\'use strict\';

require(\'./MyComponent.less\');

var React = require(\'react\')         


        

Answer 1

I think a less hacky solution would be to wrap your preprocessor in a conditional on the filename matching a javascript file:

if (filename.match(/\.jsx?$/)) {
    return babelJest.process(src, filename);
} else {
    return '';
}

This works even if you don't explicitly set the extension in the require line and doesn't require a regex substitution on the source.

Answer 2

Webpack is a great tool, but I don't need to test it's behavior with my Jest unit tests, and adding a webpack build prior to running unit tests is only going to slow down the process. The text-book answer is to mock non-code dependencies using the "moduleNameMapper" option

https://facebook.github.io/jest/docs/webpack.html#handling-static-assets

Answer 3

I just found that it's even simpler with Jest's moduleNameMapper configuration.

// package.json

"jest": {
    "moduleNameMapper": {
      "^.+\\.scss$": "<rootDir>/scripts/mocks/style-mock.js"
    }
}

// style-mock.js

module.exports = {};

More detail at Jest's tutorial page.

Answer 4

I recently released Jestpack which might help. It first builds your test files with Webpack so any custom module resolution/loaders/plugins etc. just work and you end up with JavaScript. It then provides a custom module loader for Jest which understands the Webpack module runtime.

Answer 5

I have experienced similar issue with such pattern

import React, { PropTypes, Component } from 'react';
import styles from './ContactPage.css';
import withStyles from '../../decorators/withStyles';

@withStyles(styles)
class ContactPage extends Component {

see example at https://github.com/kriasoft/react-starter-kit/blob/9204f2661ebee15dcb0b2feed4ae1d2137a8d213/src/components/ContactPage/ContactPage.js#L4-L7

For running Jest I has 2 problems:

• import of .css
• applying decorator @withStyles (TypeError: <...> (0 , _appDecoratorsWithStyles2.default)(...) is not a function)

First one was solved by mocking .css itself in script preprocessor.

Second one was solved by excluding decorators from automocking using unmockedModulePathPatterns

module.exports = {
  process: function (src, filename) {

    ...

    if (filename.match(/\.css$/)) src = '';

    ...

    babel.transform(src, ...
  }
}

example based on https://github.com/babel/babel-jest/blob/77a24a71ae2291af64f51a237b2a9146fa38b136/index.js

Note also: when you working with jest preprocessor you should clean cache:

$ rm node_modules/jest-cli/.haste_cache -r

Answer 6

Taking inspiration from Misha's response, I created an NPM package that solves this problem while also handling a few more scenarios I came across:

webpack-babel-jest

Hopefully this can save the next person a few hours.