此单击测试何时失败/通过答案

【问题标题】：When does this click test fail/pass此单击测试何时失败/通过
【发布时间】：2021-01-11 22:59:54
【问题描述】：

我正在学习测试我的反应组件。我有以下组件：

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 如何确定此点击测试是否通过。

【问题讨论】：

标签： reactjs jestjs react-testing-library

【解决方案1】：

在您的示例中，如果 Jest 找不到带有 data-testid="checkbox-action" 的元素，则测试将失败。如果 Jest 找到一个，则测试通过。所以这个测试并不是真的没用，但它的价值还有待提高。

要测试点击行为，您有 2 个选项：

设置 Checkbox 道具以提供点击处理程序，因此在您的测试中，您可以只传递一个模拟函数 (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 组件的视觉结果，这将是“the React Testing Library way”（像真人一样测试：交互，视觉结果），但似乎在单击时视觉上没有任何变化。

【讨论】：