Question

我正在使用“ react-testing-library”测试“ react-router-dom”中的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）。但是，解决该问题的一种方法是使用window.location.href = linkHref实际设置URL。

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

不确定这是否有帮助，但想将其作为可能的解决方法。您的linkButton将拥有一个href属性，您可以获取。

Answer 2

如果还不晚，请输入我的意见：

您正在启动单击，但未指定要单击哪个按钮。您的代码行应如下所示：

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

button: 0的意思是“左键单击”。希望这会有所帮助。

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

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

或者类似的事情，因为我不确定链接单击后您期望什么。请注意，.toBeInTheDocument()是'@testing-library/jest-dom'的一种方法，并作为

导入

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

测试：在带有react-testing-library的react-router-dom中的Link上单击（fireEvent.click）不会触发

2 个答案: