Unit and snapshot test initial setup and configuration

Project directory structure

By default, the Jest files expect a certain folder structure for your unit and snapshot test framework. Create the following folder structure in your environment.

.
├── tests
|   └── config
|   |   └── setup-tests.js
|   |   └── snapshot.config.js
|   |   └── test-mapper.js
|   |   └── unit.config.js
|   └── snapshots
|   |   └── *.snap.test.js
|   └── unit
|   |   └── *.unit.test.js

Configuring the setup-tests.js file

Add the following code to the setup-tests.js file to configure Jest to work with enzyme-adapter-react-16 and to configure the snapshot serializer for use with the snapshot tests:

import Enzyme from 'enzyme';
import { createSerializer } from 'enzyme-to-json';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: newAdapter() });

/* Setup snapshot serializer */
expect.addSnapshotSerializer(createSerializer({ noKey:true, mode:'deep' }));

Mocking the Redux store

Some Jest tests mount components that access a Redux store by using the getState method. You can configure a mock store with the relevant Redux methods by adding this code to the setup-tests.js file.

global.mockStore = {
  getState: jest.fn(),
  dispatch: jest.fn(),
  subscribe: jest.fn()
};

You can then call the mock store from any component in a Jest test script with the following code:

const myComponent = IntlEnzymeTestHelper.mountWithIntlWithStore(
  <MyComponent />,
  global.mockStore
);

Mocking the Redux store with custom mock state

Some unit tests might need access to a mock Redux store with a specific mock state and with custom data.

• Add the mock state to the setup-tests.js file as follows:

  const mockState = {
    // Add all of your mock data keys and values here
  };

• Set the mock getState function to return the mock state when it is called during unit tests:

  global.mockStore = {
    getState: jest.fn(() => mockState)
  };

Configuring the test-mapper.js file

Jest cannot process data from CSS or image files and throws an error to the console if these files are referenced by any React component. Jest is designed to test the behavior of the component code and distances itself from any styling or images that are applied to that component.

To cleanly bypass any of these imports, add the following code to the test-mapper.js file.

module.exports= {};

Configuring the unit.config.js and snap.config.js files

These files are designed to configure the unit tests and snapshot tests for a project. You can use the default Jest configuration by adding the following content to both files:

// unit.config.js
const { getUnitTestConfig } = require('@spm/test-framework');

module.exports = getUnitTestConfig();

// snapshot.config.js
const { getSnapshotTestConfig } = require('@spm/test-framework');

module.exports = getSnapshotTestConfig();

Setting custom jest configurations

You can customize the default Jest configuration.

For example, you can set more project-specific folders to be ignored by the Jest coverage collection statistics as follows:

const { getUnitTestConfig } = require('@spm/test-framework');

const unitTestConfig = getUnitTestConfig();
unitTestConfig.coveragePathIgnorePatterns.push('<rootDir>/path/to/my/folder1');
unitTestConfig.coveragePathIgnorePatterns.push('<rootDir>/path/to/my/folder2');

module.exports = unitTestConfig;