Select configuration mode
Wallaby can be run either with or without a configuration file. We recommend using Automatic configuration - Wallaby requires no configuration file, however if you choose Manual configuration then the tutorial will be adjusted with additional sections demonstrating the contents of the configuration file.
Automatic configuration is supported starting from Jest v24, so if you are using a previous version please update your Jest package version or else switch to Manual configuration mode.
Select your editor
The instructions in this docs section are adjusted to your editor of choice. Please select your editor by clicking on your editor’s logo below before proceeding with the tutorial:
Starting Wallaby on a project with configured Jest
To start Wallaby without configuration in VS Code you may run Select Configuration command and then select Automatic Configuration <project directory> option once. After that you may keep using Wallaby Start command as usual and it will start Wallaby with automatic configuration.
To start Wallaby without configuration in Atom you may use the Select for Wallaby.js Automatic Configuration context menu item for your project folder in the project’s file tree. After that you may keep using Wallaby Start command as usual and it will start Wallaby with automatic configuration.
To start Wallaby without configuration in Sublime Text you may use the Select for Wallaby.js Automatic Configuration context menu item for your project folder in the project’s file tree. After that you may keep using Wallaby Start command as usual and it will start Wallaby with automatic configuration.
To start Wallaby without a configuration file in Visual Studio, you may use the Start Wallaby.js (Automatic Configuration) context menu item for your project folder in the Solution Explorer. After the first start,
the selected project will be remembered for your solution and Wallaby can be started with Tools->Start Wallaby.js (Alt-W, 1).
To start Wallaby without a configuration file in JetBrains IDEs, you may edit (or create a new) wallaby.js Run Configuration by selecting Edit configurations from the drop-down menu in the top right-hand corner of the navigation bar, or from the Run menu. In the run configuration editor set Configuration Type filed value to Automatic.
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'
},
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 a 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'
},
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'
},
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: [require('babel-preset-jest')]})
}
};
};
create-react-app
You may find the full config for create-react-app generated app in this docs section.
You may find the full config for create-react-app --typescript generated app in this sample repository.
Watchman
If you want to stop Jest to use watchman when running from Wallaby, you may use the process.env.NO_WATCHMAN setting.
module.exports = function () {
process.env.NO_WATCHMAN = true;
return {
...
};
};
Overriding Automatic Configuration
If you are not using jest’s default configuration file naming convention (i.e. jest.config.js in your project root),
or if jest exists outside of your project’s default node_modules directory
(e.g. @microsoft/rush) then you may configure these locations by specifying
a configuration file.
module.exports = () => {
return {
// tell wallaby to use automatic configuration
autoDetect: true,
// override test framework settings for path or configuration file
// (may specify either a single setting or both)
testFramework: {
// the path to locate jest
// (relative to project root)
path: './subfolder/node_modules',
// the jest configuration file path
// (relative to project root)
configFile: './packages/build-test/jest/unit'
}
}
};
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:
Troubleshooting
When configured to run using automatic configuration, Wallaby runs in Jest’s execution pipeline. Wallaby will return the same results and code coverage as you would get when running Jest from the command-line.
The first step of troubleshooting a project configured to use automatic configuration is to identify whether the same results are returned using npx jest. Running Jest from the command-line will usually
show/highlight the cause of your problem. You may also try clearing Jest’s cache using: npx jest --clearCache.
If you get stuck or something isn’t working for you, you may find further troubleshooting steps here or else find a similar solved issue in our github issues repository. If you can’t find a solution, create a new issue.