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

Question

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

这是测试代码：

  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",

...

Answer 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);
  });