如何使用 <Link /> react router dom 测试 url 更改答案

【问题标题】：How to test a url change with <Link /> react router dom如何使用 <Link /> react router dom 测试 url 更改
【发布时间】：2021-11-25 16:16:49
【问题描述】：

我想测试，当点击这个“重置过滤器”按钮时，转到 /offerings，但我不知道如何从 react-router-dom 测试这个 <Link /> 组件

按钮

<Link to="/offerings">
   <StyledButton trackingId="reset-filters">Reset filters</StyledButton>
</Link>

测试文件：

it('should go to /offerings when the button is clicked when logged in', () => {
    const wrapper = mountWithTheme(
      <Provider
        store={configureMockStore({
          user: {
            userState: {
              loggedIn: true,
            },
          },
        })}
      >
        <BrowserRouter>
          <MarketplaceEmptyState resetFilter={resetFilter} />
        </BrowserRouter>
      </Provider>
    );

    wrapper.find('MarketplaceEmptyState').setState({
      allStatusFetched: true,
    });

    expect(
      wrapper
        .find('[data-cy="empty-state-filter-copy"]')
        .first()
        .text()
    ).toEqual(`Please reset the filters.`);

    wrapper.find('button[id="reset-filters"]').simulate('click');

    const leftClick = {button: 0} << -----------------------------|
    userEvent.click(screen.getByText(/offerings/i), leftClick) << ------  Tried this but it's not working
  });

【问题讨论】：

标签： reactjs react-router-dom react-testing-library testing-library

【解决方案1】：

测试您是否真的在导航的一种方法是，在渲染 TestComponent 的测试中向 BrowserRouter 添加带有路径 /offerings 的第二条路由

单击按钮后检查屏幕是否呈现了 TestComponent 而不是 MarketplaceEmptyState（例如向 TestComponent 添加一些文本并检查文本是否存在）。

【讨论】：