这个点击测试什么时候fail/pass

Question

我正在学习测试我的 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 将如何确定此点击测试是通过还是失败。

Answer 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”（像真人一样测试：交互，视觉结果），但似乎没有任何变化单击时可见。

这个点击测试什么时候fail/pass

When does this click test fail/pass

reactjs

jestjs

react-testing-library