Тестирование компонентов и приложения в ReactJS с помощью Jest и Enzyme

Jest — это JavaScript-фреймворк для тестирования, разработанный Facebook, который предоставляет полную поддержку тестирования React-приложений. Enzyme — это библиотека для тестирования компонентов React, созданная Airbnb, позволяющая выполнять различные типы тестов, такие как юнит-тесты, интеграционные тесты и т.д.

Установка и настройка Jest и Enzyme

Для установки Jest и Enzyme выполните следующие команды:

npm install --save-dev jest enzyme enzyme-adapter-react-16 enzyme-to-json

Создайте файл конфигурации Jest (jest.config.js) в корне проекта и добавьте следующее содержимое:

module.exports = {
  setupFilesAfterEnv: ['./setupTests.js'],
  snapshotSerializers: ['enzyme-to-json/serializer'],
};

Затем создайте файл setupTests.js и добавьте следующий код:

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

Написание тестов с Jest и Enzyme

Предположим, у вас есть простой компонент Button:

// Button.js
import React from 'react';

const Button = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
);

export default Button;

Юнит-тестирование

Ниже пример юнит-теста для компонента Button:

// Button.test.js
import React from 'react';
import { shallow } from 'enzyme';
import Button from './Button';

describe('Button', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<Button>Click me</Button>);
    expect(wrapper).toMatchSnapshot();
  });

  it('handles onClick event', () => {
    const onClickMock = jest.fn();
    const wrapper = shallow(<Button onClick={onClickMock}>Click me</Button>);
    wrapper.simulate('click');
    expect(onClickMock).toHaveBeenCalled();
  });
});

Интеграционное тестирование

Предположим, у вас есть компонент App, использующий Button:

// App.js
import React, { useState } from 'react';
import Button from './Button';

const App = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <Button onClick={handleClick}>Increment</Button>
    </div>
  );
};

export default App;

Пример интеграционного теста:

// App.test.js
import React from 'react';
import { mount } from 'enzyme';
import App from './App';

describe('App', () => {
  it('increments count on button click', () => {
    const wrapper = mount(<App />);
const initialCount = wrapper.find('p').text();
expect(initialCount).toEqual('Count: 0');


wrapper.find('button').simulate('click');
const updatedCount = wrapper.find('p').text();
expect(updatedCount).toEqual('Count: 1');
});
});

Mock-функции и асинхронное тестирование

Иногда необходимо протестировать компоненты, которые взаимодействуют с асинхронными функциями или сторонними API. В таких случаях, вы можете использовать мок-функции (mock functions) для эмуляции асинхронного поведения. Вот пример компонента `UserList`, который загружает данные с помощью функции `fetchUsers`:

// UserList.js
import React, { useEffect, useState } from 'react';

const fetchUsers = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  return await response.json();
};

const UserList = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchUsers().then((data) => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

Тестирование с мок-функцией:

// UserList.test.js
import React from 'react';
import { mount } from 'enzyme';
import UserList from './UserList';

const mockUsers = [
  { id: 1, name: 'User 1' },
  { id: 2, name: 'User 2' },
];

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve(mockUsers),
  })
);

describe('UserList', () => {
  it('fetches and displays user list', async () => {
    const wrapper = mount(<UserList />);
    await wrapper.update();
    expect(wrapper.find('li')).toHaveLength(mockUsers.length);
    expect(wrapper.text()).toContain(mockUsers[0].name);
    expect(wrapper.text()).toContain(mockUsers[1].name);
  });
});

В заключение, Jest и Enzyme предоставляют мощный инструментарий для тестирования React-приложений, позволяющий уверенно создавать надежные и стабильные компоненты.

Добавить комментарий

Back to top button