DEV Community

Cover image for Configure Jest and usage in UmiJS πŸ₯³
Nitin Reddy
Nitin Reddy

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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.

Image description

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

You also need to add jest script in package.json

"scripts": {
    "test": "jest"
  }
Enter fullscreen mode Exit fullscreen mode

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'],
};
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode
  • 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();
  });
});

Enter fullscreen mode Exit fullscreen mode
  • Finally, you can run the tests by running the following command:
npx jest
Enter fullscreen mode Exit fullscreen mode

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"]
}
Enter fullscreen mode Exit fullscreen mode

Thanks in advance for reading this article...πŸš€

I am more than happy to connect with you on

You can also find me on

Top comments (0)