Jest Unit Test Configuration

Recently working on a company-level UI component library, for testing, decided to continue using Jest. Pursuing simplicity, decisively abandoned the copy-paste shortcut and configured from scratch. Documenting this here.

Understanding Concepts

Before playing, first understand what Jest does

Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!

The above is the official introduction, from which we know Jest is not just for React and JS.

Frontend Technology Stack

Listing the technology stack used in my frontend project:

• React
• TypeScript
• antd

So, based on this, let’s configure testing

Basic Configuration

package.json

Here only listing packages needed for UT installation:

{
  "devDependencies": {
    "@types/enzyme": "3.1.13",
    "@types/jest": "23.3.1",
    "enzyme": "3.5.0",
    "enzyme-adapter-react-16": "1.3.0",
    "identity-obj-proxy": "3.0.0",
    "jest": "23.5.0",
    "ts-jest": "23.1.4",
  }
}

Function of Each Package

1. @types/**

   TS definition files for required libraries

2. enzyme

   A testing tool, note it can only be used for react

3. enzyme-adapter-react-16

   Serves react component testing

4. identity-obj-proxy

   Mock object, for example UT testing components might import images or less styles.

5. jest

   Target testing framework, definitely need to install

6. ts-jest

   Because we’re writing frontend projects with TS, so need to install this package. If we were writing frontend with JS, we could delete this package.

jest.conf.js

module.exports = {
  transform: {
    '^.+\\.tsx?$': 'ts-jest'
  },
  testMatch: ['<rootDir>/test/**/+(*.)+(spec.ts?(x))'],
  coverageDirectory: '<rootDir>/test-results/',
  testPathIgnorePatterns: ['<rootDir>/node_modules/'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  globals: {
    'ts-jest': {
      tsConfigFile: './tsconfig.test.json'
    }
  },
  moduleNameMapper: {
    '\\.(less)$': 'identity-obj-proxy'
  },
  setupFiles: ['<rootDir>/test/enzyme-setup.ts']
};

script

{
 "scripts": {
    "test": "jest --coverage --logHeapUsage --maxWorkers=2 --config ./jest.conf.js"
  } 
}

• coverage is to display test code coverage information
• maxWorkers is to speed up UT execution time, this value is recommended not to be too large.

More configuration, see official website

About maxWorkers, you can see here

Key Configuration Points in Jest

1. Because frontend components here import less files, module proxy is set up here.
2. setupFiles is configured because I used enzyme for react component testing

Issues Encountered

test match 0

When actually running UT, initially found match was 0. The direct reason is Jest couldn’t find our test cases.

Solution is two points:

1. Ensure testMatch path is correct
2. Add moduleFileExtensions

Final Thoughts

After the above configuration, executing the test command will show the output results below. Of course, Jest configuration is much more extensive than shown here - this is just a simple starting point. Next is to gradually improve and enrich based on actual circumstances.

Although this is just a rough and brief introduction, I hope it can help everyone.

References

• jest configuration - offcial doc
• Jest Unit Testing Configuration and Solutions to Common Issues