Jestpack

Unfortunately Jest doesn't play nicely with Webpack, especially when using some of Webpack's more useful features such as loaders or code splitting.

Jestpack attempts to solve this problem by ~~extending~~ replacing Jest's default module loader to support Webpack's internal module system.

Installation

npm install jestpack --save-dev

NOTE: Jestpack >=0.2.0 depends on Node >=5.x.x.

NOTE: Jestpack declares both jest-cli and webpack as peer dependencies meaning you must declare them both as either devDependencies or dependencies in your projects package.json.

Setup

Jestpack works by supplying pre-built test files to Jest so the first thing you'll want to do is tell Jest where it can expect to find your soon-to-be-bundled test files:

// package.json
{
    ...
    "jest": {
        "testPathDirs": ["<rootDir>/__bundled_tests__"]
    }
}

Then you'll need to get Jest to use the Jestpack module loader:

// package.json
{
    ...
    "jest": {
        ...
        "moduleLoader": "<rootDir>/node_modules/jestpack/ModuleLoader",
    }
}

Now you're ready to setup your Webpack config by first specifiying the output directory:

// webpack.config.js
module.exports = {
    output: {
        path: '__bundled_tests__',
        filename: '[name].js'
    }
}

And then getting Webpack to build each test as a separate entry point:

// webpack.config.js
module.exports = {
    ...
    entry: {
        'src/__tests__/test1': './src/__tests__/test1',
        'src/__tests__/test2': './src/__tests__/test2',
        'src/__tests__/test3': './src/__tests__/test3'
        // etc.
    }
}

NOTE: Using a separate entry point per test suite allows Jest to run your tests in parallel processes!

NOTE: The /example demonstrates how the entry points could be dynamically generated.

If you intend to define manual __mocks__ then you need to run your modules through the manual mock loader:

// webpack.config.js
module.exports = {
    ...
    preLoaders: [
        {
            test: /\.js$/,
            loader: 'jestpack/ManualMockLoader'
        }
    ]
}

Finally, you need to apply the Jestpack plugin which transforms Jest's CommonJs API calls into something Webpack can understand, i.e. jest.dontMock('../foo') becomes jest.dontMock(1):

// webpack.config.js
var JestpackPlugin = require('jestpack/Plugin');

module.exports = {
    ...
    plugins: [
        new JestpackPlugin()
    ]
}

And save the stats.json in the root of your config.testPathDirs directory. So in this case __bundled_tests__/stats.json:

// webpack.config.js
var StatsWebpackPlugin = require('stats-webpack-plugin');

module.exports = {
    ...
    plugins: [
        ...
        new StatsWebpackPlugin('stats.json')
    ]
}

Tests can then be run by building your tests and running Jest:

webpack && jest

NOTE: A complete working configuration can be found in the /example directory.

Optimization

Depending on the number of modules in your dependency graph you may experience incredibly slow builds when building a separate entry point per test suite. This can be greatly optimized using Webpack's CommonsChunkPlugin:

// webpack.config.js
var webpack = require('webpack');

modle.exports = {
    ...
    plugins: [
        ...
        // This is telling Webpack to extract all dependencies that are used by 2 or more modules into '__bundled_tests__/common.js'
        new webpack.optimize.CommonsChunkPlugin({
            filename: 'common.js',
            minChunks: 2
        })
    ]
}

Which can then be included via Jest's config.setupEnvScriptFile:

// package.json
{
    ...
    "jest": {
        ...
        "setupEnvScriptFile": "<rootDir>/__bundled_tests__/common.js"
    }
}

In addition, if you actually need to do some environment setup you can get the common chunk to execute an entry point like this:

// webpack.config.js
module.exports = {
    ...
    entry: {
        ...
        setup: './setup.js'
    },
    ...
    plugins: [
        ...
        // When the common.js chunk is included it will execute the 'setup' entry point.
        new webpack.optimize.CommonsChunkPlugin({
            name: 'setup',
            filename: 'common.js',
            minChunks: 2
        })
    ]
}

If you need to do some setup after Jasmine has loaded, e.g. define some global matchers, then you can use Jest's config.setupTestFrameworkScriptFile instead:

// package.json
{
    ...
    "jest": {
        ...
        "setupTestFrameworkScriptFile": "<rootDir>/__bundled_tests__/common.js"
    }
}

Tips

If you're using the babel-loader it's best not to include the runtime. If for some reason you need to then make sure it's in Jest's config.unmockedModulePathPatterns:

// package.json
{
    ...
    "jest": {
        ...
        "unmockedModulePathPatterns": [
            ...
            "<rootDir>/node_modules/babel-runtime"
        ]
    }
}

If you're using code splitting then you're better off disabling it for tests with Webpack's LimitChunkCountPlugin:

// webpack.config.js
var webpack = require('webpack');

module.exports = {
    ...
    plugins: [
        ...
        new webpack.optimize.LimitChunkCountPlugin({
            maxChunks: 1
        })
    ]
}

If you're using css modules you'll need to add the loader to Jest's config.unmockedModulePathPatterns:

// package.json
{
    ...
    "jest": {
        ...
        "unmockedModulePathPatterns": [
            ...
            "<rootDir>/node_modules/css-loader"
        ]
    }
}

Current Limitations

• Code coverage isn't supported.