测试：在 react-router-dom 中的 Link 上单击 (fireEvent.click) with react-testing-library 不会触发

Question

我正在使用 react-testing-library 从 'react-router-dom' 测试 Link。

通常单击此 link，页面上应该会出现 linkId。

但是 fireEvent.click 在我的测试中，不会触发该操作。所以我没有我的内容。


      <ul>
        <li>
          <Link  data-testid="item" to={generatePath(LINK_TEST, { linkId: 'Link_test1' })}>Link Test 1</Link>
        </li>
... test : 

    const linkButton = getByText(/Link Test 1/)

    fireEvent.click(linkButton)

    const content = queryAllByText(/Page : Link_test1/)
    await waitForElement(() => content)
    expect(content).toHaveLength(1)

Answer 1

我一直在用所有链接解决这个问题（我没有使用 react-router-dom）。但是我绕过它的一种方法是实际将 URL 设置为 window.location.href = linkHref。

当我这样做时，它触发了我设置的事件处理程序。

不确定这是否有丝毫帮助，但想尽可能地提及它 work-around。你的 linkButton 会有一个 href 属性你可以抓住。

Answer 2

如果现在提供我的意见还为时不晚：

您正在启动点击，但没有指定您点击的是哪个按钮。您的代码行应如下所示：

  fireEvent.click(linkButton, { button: 0});

因为 button: 0 表示 'left-click'。希望这会有所帮助。

编辑：此外，我认为在这种情况下不需要 await。如果这是整个代码的一部分，你可能确实需要它，但在类似的情况下，我只是触发点击事件，然后检查我期望在文档中出现的内容是否在文档中，例如：

expect(getByText('Page : Link_test1')).toBeInTheDocument();

或类似的东西，因为我不确定您在 link 点击后的期望是什么。请注意，.toBeInTheDocument() 是 '@testing-library/jest-dom' 中的一种方法，并作为

导入

'@testing-library/jest-dom/extend-expect'

测试：在 react-router-dom 中的 Link 上单击 (fireEvent.click) with react-testing-library 不会触发

Test : Click (fireEvent.click) on Link in react-router-dom with react-testing-library doesn't trigger

reactjs

testing

react-router

react-router-dom

react-testing-library