Configure Jest and usage in UmiJS 🥳

Before setting up Jest and using it in your application,
you can initiate a umijs project using the following

yarn create @umijs/umi-app

To configure Jest in umi.js, you will need to install the following dependencies:

• jest and @testing-library/react: These are the core libraries needed for running tests and testing React components.

• babel-jest: This library is needed to enable Jest to understand modern JavaScript syntax.

• @umijs/preset-jest: This is a preset that provides a set of Jest configurations that are optimized for umi.js.

Once you have installed these dependencies, you can add a jest field to the package.json file in your project's root directory. This field should contain the following configurations:

{
  "jest": {
    "preset": "@umijs/preset-jest"
  }
}

You also need to add jest script in package.json

"scripts": {
    "test": "jest"
  }

And then you can run the test cases via npm run test

You can also configure Jest with a configuration file, jest.config.js, in the project's root directory. This file should export an object that contains the Jest configurations.

Make sure you have the correct imports and presets in your jest.config.js file.

const { presets } = require('@umijs/preset-jest');
module.exports = {
  ...presets,
  testMatch: ['<rootDir>/tests/**/*.test.js'],
};

This should get you started with Jest in umi.js.

To write unit tests in umi.js, you can use Jest as the test runner and React testing library as the testing library.

• Create a tests folder in your project, and create a test file for the component you want to test (e.g. MyComponent.test.js).

• Import the component you want to test and the Enzyme library at the top of the test file:
  

import React from 'react';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

• Write your test cases using Jest and Enzyme. For example, you can test if the component renders correctly by doing the following:

describe('MyComponent', () => {
  it('should render the component', () => {
    const { getByText } = render(<MyComponent />);
    const text = getByText(/Hello, World!/i);
    expect(text).toBeInTheDocument();
  });
});

• Finally, you can run the tests by running the following command:

npx jest

Make sure you have the jest configuration file in your project root directory. If not, you can create one with the command jest --init or creating a file called jest.config.js in the root of your project with the following content:

module.exports = {
  "setupFilesAfterEnv": ["<rootDir>/setupTests.js"]
}

Thanks in advance for reading this article...🚀

I am more than happy to connect with you on

• @twitter
• @LinkedIn

You can also find me on

• @Github
• @DEV
• @Medium