Настройте Jest и использование в UmiJS 🥳

Прежде чем настраивать Jest и использовать его в своем приложении, вы можете инициировать проект umijs, используя следующие

yarn create @umijs/umi-app

Чтобы настроить Jest в umi.js, вам потребуется установить следующие зависимости:

jest и @testing-library/react: это основные библиотеки, необходимые для запуска тестов и тестирования компонентов React.
babel-jest: эта библиотека необходима, чтобы Jest понимал современный синтаксис JavaScript.
@umijs/preset-jest: это предустановка, предоставляющая набор конфигураций Jest, оптимизированных для umi.js.

yarn add jest @testing-library/react babel-jest @umijs/preset-jest

После того, как вы установили эти зависимости, вы можете добавить поле jest в файл package.json в корневом каталоге вашего проекта. Это поле должно содержать следующие конфигурации:

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

Вам также нужно добавить сценарий шутки в package.json

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

И затем вы можете запустить тестовые случаи через npm run test.

Вы также можете настроить Jest с помощью файла конфигурации jest.config.js в корневом каталоге проекта. Этот файл должен экспортировать объект, содержащий конфигурации Jest.

Убедитесь, что у вас есть правильный импорт и пресеты в файле jest.config.js.

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

Это должно помочь вам начать работу с Jest в umi.js.

Чтобы написать модульные тесты в umi.js, вы можете использовать Jest в качестве средства запуска тестов и библиотеку тестирования React в качестве библиотеки тестирования.

Создайте папку с тестами в своем проекте и создайте тестовый файл для компонента, который вы хотите протестировать (например, MyComponent.test.js).
Импортируйте компонент, который вы хотите протестировать, и библиотеку тестирования реакции в верхней части тестового файла:

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

3. Напишите свои тестовые примеры, используя Jest и Enzyme. Например, вы можете проверить правильность отображения компонента, выполнив следующие действия:

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

4. Наконец, вы можете запустить тесты, выполнив следующую команду:

npx jest

Убедитесь, что файл конфигурации jest находится в корневом каталоге вашего проекта. Если нет, вы можете создать его с помощью команды jest — init или создать файл с именем jest.config.js в корне вашего проекта со следующим содержимым:

module.exports = {
setupFilesAfterEnv: [‹rootDir›/setupTests.js]
}

Заранее спасибо за прочтение этой статьи…🚀

Я очень рад связаться с вами

Вы также можете найти меня

@Гитхаб
@ДЕВ
"@Середина"

Настройте Jest и использование в UmiJS 🥳