Блог

Я учусь тестировать свои компоненты react. У меня есть следующий компонент :

 import React from 'react';
import PropTypes from 'prop-types';
import { firebase } from '../firebase';

export const Checkbox = ({ id, taskDesc }) => {
  const archiveTask = () => {
    firebase.firestore().collection('tasks').doc(id).update({
      archived: true,
    });
  };

  return (
    <div
      className="checkbox-holder"
      data-testid="checkbox-action"
      onClick={() => archiveTask()}
      onKeyDown={(e) => {
        if (e.key === 'Enter') archiveTask();
      }}
      aria-label={`Mark ${taskDesc} as done?`}
      role="button"
      tabIndex={0}
    >
      <span className="checkbox" />
    </div>
  );
};
 

И в тесте они тестируют onClick и onKeyDown следующим образом :

  it('renders the task checkbox and accepts a onClick', () => {
      const { queryByTestId } = render(
        <Checkbox id="1" taskDesc="Finish this tutorial series!" />
      );
      expect(queryByTestId('checkbox-action')).toBeTruthy();
      fireEvent.click(queryByTestId('checkbox-action'));
    });
 

Но он просто нажимает на него и не проверяет, была ли вызвана функция onClick. Этот тест вообще завершен или ему нужно больше?

Неясно, как jest определит, проходит ли этот тест щелчка или нет.

В вашем примере тест завершится неудачей, если Jest не сможет найти элемент с data-testid="checkbox-action" помощью . Если Jest находит его, тест проходит. Таким образом, этот тест на самом деле не бесполезен, но его значение можно улучшить.

Чтобы проверить поведение щелчка, у вас есть 2 варианта :

Установите флажок, чтобы предоставить обработчик щелчка, поэтому в своем тесте вы можете просто передать издевательскую функцию (jest.fn()), а затем проверить, что макет был вызван. Поэтому вам нужно немного изменить свой компонент Checkbox.

 it('renders the task checkbox and accepts a onClick', () => {
  const mock = jest.fn();
  const { queryByTestId } = render(
    <Checkbox id="1" taskDesc="Finish this tutorial series!" onClick={mock}/>
  );
    
  expect(queryByTestId('checkbox-action')).toBeTruthy();
  fireEvent.click(queryByTestId('checkbox-action'));
  expect(mock).toHaveBeenCalled();
});
 

… или протестируйте визуальное последствие нажатия на ваш компонент Checkbox, который будет «способом библиотеки тестирования реакции» (тест как у настоящего человека: взаимодействия, визуальные последствия), но, похоже, визуально при щелчке ничего не меняется.