Wallaby.js supports the Facebook Jest testing framework.
module.exports = function () {
return {
files: ['src/**/*.js', '!src/**/__tests__/*.js'],
tests: ['src/**/__tests__/*.js'],
env: {
type: 'node',
runner: 'node'
},
testFramework: 'jest'
};
};
You may find the working sample of wallaby.js configuration for Jest in this repository.
Please note that wallaby.js is using its own cache to run your tests from, not the local project folder. You should include all files (except node modules) that your tests need, for example __mocks__/*.*, etc.
Jest configuration
If Jest in your project is configured using package.json or jest.config.js/jest.config.json file, then wallaby will automatically load the configuration. If you would like to adjust the configuration, you may use the setup function, and pass require('./package.json').jest (or require('./jest.config')) to the wallaby.testFramework.configure function. Don’t forget to include package.json/jest.config.js/jest.config.json in your files list in this case.
module.exports = function () {
return {
files: [
'src/**/*.js',
'package.json', // <--
'!src/**/__tests__/*.js'
],
tests: ['src/**/__tests__/*.js'],
env: {
type: 'node',
runner: 'node'
},
testFramework: 'jest',
setup: function (wallaby) {
var jestConfig = require('./package.json').jest;
// for example:
// jestConfig.globals = { "__DEV__": true };
wallaby.testFramework.configure(jestConfig);
}
};
};
If you have some other Jest config, or would like to override some configuration values, you may pass any config object to the configure function of the test framework in wallaby setup function.
Babel
If you are using Babel compilation in your project, you need to add Babel compiler to your config:
module.exports = function (wallaby) {
return {
...
testFramework: 'jest',
compilers: {
'**/*.js': wallaby.compilers.babel()
}
};
};
TypeScript
TypeScript Jest configuration (ts-jest modules to be more specific) requires the access to the tsconfig.json file, so if you are using Jest with TypeScript, you’ll need to add the file to your files list:
module.exports = function () {
return {
files: [
'tsconfig.json', // <--
'src/**/*.ts',
'!src/**/__tests__/*.ts'
],
tests: ['src/**/__tests__/*.ts'],
env: {
type: 'node',
runner: 'node'
},
testFramework: 'jest'
};
};
Jest with TypeScript and jest.mock calls
If you are using TypeScript with Jest and your tests are making jest.mock calls, then you will need to run Babel (babel-preset-jest) transformation on top of TypeScript compilation (just like ts-jest is doing) to hoist the calls:
module.exports = function (w) {
return {
files: [
...
],
tests: [
...
],
...
preprocessors: {
'**/*.js?(x)': file => require('babel-core').transform(
file.content,
{sourceMap: true, filename: file.path, presets: ['babel-preset-jest']})
}
};
};
Snapshot testing
It’s recommended to read the article about Jest snapshot testing workflow with wallaby.js. Amongst other things, the article describes how to update individual test snapshots:
You may also find a couple of snapshot testing notes/recipes with jest plus wallaby.js in this question discussion.
create-react-app
You may find the full config for create-react-app generated app in this docs section.
modulePaths
Because wallaby runs tests from its own file cache (with instrumented files) and the <rootDir> in Jest configuration is pointing to the local project, slight config adjustment is required if your Jest config uses modulePaths to add additional locations to search when resolving modules.
Note that the change is only required if you are using the modulePaths setting for your source code that you want wallaby to show code coverage for. It is not required if you are specifying additional node_modules locations.
For example, if you have the src/sum.js module and src/__tests__/sum-test.js test file, and from your test file you want to import/require the sum module as import ... from 'sum' (or ... require('sum')), and not as import ... from '../sum' (or ... require('../sum')), then you may be using the following modulePaths setting in your Jest config:
{
...
"jest": {
"modulePaths": [
"<rootDir>/src/"
]
}
}
In order to display code coverage in this case, wallaby config needs to adjust the Jest config using the setup function as follows:
module.exports = function () {
return {
...
setup: function (wallaby) {
const jestConfig = require('./package.json').jest;
jestConfig.modulePaths = jestConfig.modulePaths.map(p => p.replace('<rootDir>', wallaby.projectCacheDir));
wallaby.testFramework.configure(jestConfig);
}
};
};
scriptPreprocessor
If you are using scriptPreprocessor for some source files that you’d like to see wallaby coverage for, you’ll need to use wallaby preprocessor or wallaby compiler instead. For example, TypeScript or CoffeeScript compiler or Babel compiler.