反应测试：userEvent.click 不起作用答案

【问题标题】：react-testing: userEvent.click does not work反应测试：userEvent.click 不起作用
【发布时间】：2022-10-06 01:22:57
【问题描述】：

我正在尝试使用 userEvent 来测试 UI 交互。但是，它似乎无法正常工作。我使用this 文档作为参考。是否有一些必要的设置才能使其工作？

这是测试代码：

  test(\'A\', () => {
    //setup
    const user = userEvent.setup();

    const sensing = jest.fn();
    const subject = (<button onClick={sensing}>testButton</button>);

    render(subject);

    // run
    user.click(screen.getByText(\'testButton\'));

    // check
    expect(sensing).toBeCalledTimes(1);
  });

使用 fireEvent.click 而不是 user.click 确实有效。

package.json 的一部分

\"react\": \"^18.1.0\",
\"react-dom\": \"^18.1.0\",
\"@storybook/react\": \"^6.4.22\",
\"@storybook/testing-library\": \"^0.0.9\",
\"@testing-library/dom\": \"^8.13.0\",
\"@testing-library/jest-dom\": \"^5.16.4\",
\"@testing-library/react\": \"^13.2.0\",
\"@testing-library/react-hooks\": \"^8.0.0\",
\"@testing-library/user-event\": \"^14.2.0\",

...

标签： reactjs unit-testing react-testing-library

【解决方案1】：

UserEvent 需要 await。所以你想写这个：

  test('A', async () => {
    //setup
    const user = userEvent.setup();

    const sensing = jest.fn();
    const subject = (<button onClick={sensing}>testButton</button>);

    render(subject);

    // run
    await user.click(screen.getByText('testButton'));

    // check
    expect(sensing).toBeCalledTimes(1);
  });

【讨论】：

【解决方案2】：

如果您单击的按钮被禁用，则不会调用模拟。此函数将由 fireEvent 调用，但不会由用户事件调用。检查按钮是否被禁用

【讨论】：