Setup Testing Environment

1. Prerequisites

• Enzyme

• Facebook Jest

• Wepack(optional)

2. Set up testing environment

2.1 Install test libraries

• Jest: to setup Jest please follow the steps defined in here, and add the additional configuration if necessary.
• Enzyme: Add package with npm npm i --save-dev enzyme

2.2 Setup babel

To use Babel, install the babel-jest and regenerator-runtime packages:

npm install --save-dev babel-jest regenerator-runtime

Note: Explicitly installing regenerator-runtime is not needed if you use npm 3 or 4 or Yarn

Don't forget to add a .babelrc file in your project's root folder. For example, if you are using ES6 and React.js with the babel-preset-es2015 and babel-preset-react presets:

{
    "presets": ["es2015", "react"]
}

You are now set up to use all ES6 features and React specific syntax.

Note 2: Don't modify the .babelrc file if is it already set on the project, try to configure jest to use it as is.

2.3 Setup webpack on jest

All the setup is in package.json on the key jest.

// package.json
{
  //other things...
  "jest": {
    //configuration...
  }
}

2.4 Handling static Assets

This is heavily based , almost copy an exact copy, on the Facebook Jest - Using Webpack

Next, let's configure Jest to gracefully handle asset files such as stylesheets and images. Usually, these files aren't particularly useful in tests so we can safely mock them out. However, if you are using CSS Modules then it's better to mock a proxy for your className lookups.

Your jest configuration should look like:

// package.json
{
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/__mocks__/fileMock.js",
      "\\.(css|less|scss)$": "<rootDir>/tests/__mocks__/styleMock.js"
    }
  }
}

In the first key moduleNameMapper we are telling Jest to mock all the files with jpg, jpeg, png, etc. Suffix on the second line we are telling it to mock the style files with css, less and scss suffix.

Note: <rootDir> is a special token that gets replaced by Jest with the root of your project. Most of the time this will be the folder where your package.json is located unless you specify a custom rootDir option in your configuration.We should create the files that jest will use to mock the styles and the other files:

// __mocks__/styleMock.js

module.exports = {};

// __mocks__/fileMock.js

module.exports = 'test-file-stub';

Note: In Yellowme we use SASS(.scss) that's why we add it to the jest configuration.

Note 2: <rootDir> is a special token that gets replaced by Jest with the root of your project. Most of the time this will be the folder where your package.json is located unless you specify a custom rootDir option in your configuration.

2.5 Configuring Jest to find our files

Now that Jest knows how to process our files, we need to tell it how to find them. For webpack's modulesDirectories, and extensions options there are direct analogs in Jest's moduleDirectories and moduleFileExtensions options.

Add them to jest like this:

// package.json
{
  "jest": {
    "moduleFileExtensions": ["js", "jsx"],
    "moduleDirectories": ["node_modules", "bower_components", "shared"],
    //Other jest configurations...
  }
}

2.6 Test naming convention

The tests are divided on Unit Tests and Snapshots Tests, to differentiate between them we use the follow naming convention:

2.6.1 Config naming convention

To make Jest test our test files we need to tweak the testRegex option to tell them to do it. On the Jest configuration add the following:

// package.json
{
  "jest": {
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec|Snapshot|Unit))\\.jsx?$",
  }
}

This will test any javascript file inside the __tests__ directory and any file with the suffix test, spec, Snapshot or Unit.

For more configuration options check Facebook Jest - Using Webpack.

2.7 Set up scripts

Add the following scripts on the scripts key on the package.json

 "scripts": {
  "test": "jest --coverage", //Run the test and report the coverage of the src code being tested
  "test:watch": "jest --watch" // Watch for changes and run the tests when it happen
  //other scripts...
}

3. Tests directory Structure

The directory structure should follow this rules:

1. There should be a tests directory on the root directory.
2. There should be a components directory in the tests directory.
3. There should be a __mocks__ in the test directory with a fileMock.js and a styleMock.js in it.
4. In the components directory each component should have a directory with its name and inside it should have the Unit and Snapshot test files of the component.

Example:

Note: The __snapshots__ folder is created when the snapshots tests are run.

References

1. Facebook Jest
2. Facebook Jest - Using Webpack
3. Enzyme
4. Wepack