Jest Webpack Examples

Examples

• Alias example
• Non-Javascript dependencies example
• JSX Example

Problems with ES6 imports

Consider the case:

File a.es6

export default class A {};

File b.es6

import A from './a.es6';
export default class B extends A {};

File c.es6

import B from './b.es6';
export default class C extends B {};

This will break:

File __tests__/c.es6

jest.dontMock('../c.es6');
const C = require('../c.es6').default; //import C from '../c.es6' will not work

Jest can't mock ES6 exports, so the solution is either to jest.dontMock()
each of the involved imports (recursively) or create custom __mocks__ per each file.

This will work:

File __tests__/c.es6

jest.dontMock('../c.es6');
jest.dontMock('../b.es6');
jest.dontMock('../a.es6');
const C = require('../c.es6').default;

This will also work:

File __mocks__/a.es6

jest.dontMock('../a.es6');
module.exports = require('../a.es6').default;

File __mocks__/b.es6

jest.dontMock('../b.es6');
module.exports = require('../b.es6').default;

File __tests__/c.es6

jest.dontMock('../c.es6');
const C = require('../c.es6').default;

Problems with coverage

jest --coverage will miss sources unless the tests explicitly dontMock() them and use the ES6 import workaround.

This will pass the test but miss coverage:

File a.es6

export default 'test';

File __mocks__/a.es6

jest.dontMock('../a.es6')
module.exports = require('../a.es6').default;

File __tests__/a.es6

import a from '../a.es6';
describe('a', function() {
  it('should be equal to "test"', function() {
    expect(a).toBe('test');
  });
});

The import will work because of the custom mock but coverage will be missing

This will pass the test and will be covered:

File a.es6

export default 'test';

File __tests__/a.es6

jest.dontMock('../a.es6');
const a = require('../a.es6').default;
describe('a', function() {
  it('should be equal to "test"', function() {
    expect(a).toBe('test');
  });
});

Problems with aliases

Aliases that resolve to files work perfectly, however, when alias refers to directory it will not be resolved.

Webpack will bundle this fine but jest will not be able to resolve the alias:

File webpack.config.babel.js

import path from 'path';
const ROOT_PATH = path.resolve(__dirname);
...
resolve: {
  alias: {
    lib: path.resolve(ROOT_PATH, 'lib'),
  }
}
...

File lib/a.es6

export default class A {}

File b.es6

import A from 'lib/a.es6';
export default class B extends A {};

File __tests__/b.es6

jest.dontMock('../b.es6');
const B = require('../b.es6').default;

The test will break with Error: Cannot find module '.../lib' from '.../b.es6'

Test

git clone https://github.com/nhz-io/jest-webpack-examples.git
cd jest-webpack-examples
npm install
npm test

LICENSE

MIT

VERSION

1.0.0