将 LocationProvider 添加到 React 测试库中的 `rerender` 方法

问题描述

我正在将 @reach/router 用于我的 React 应用程序，但我有一个失败的测试用例。

该应用有两个基本页面，在 PageOne 上，它使用方法 useLocation，只是为了确定它所在的页面。

当我测试 PageOne 组件时，测试在 rerender 方法上失败，因为没有与 LocationProvider 函数一起使用的 renderWithRouter。

测试文件：

import React from "react";
import { render,screen } from "@testing-library/react";
import PageOne from "../Components/PageOne";
import {
  Router,createHistory,createMemorySource,LocationProvider
} from "@reach/router";

const renderWithRouter = (
  ui,{ route = "/",history = createHistory(createMemorySource(route)) } = {}
) => {
  window.history.pushState({},"renderWithRouter",route);

  console.info("rendeWithRouter");

  return {
    ...render(<LocationProvider history={history}>{ui}</LocationProvider>),history
  };
};

describe("the function of PageOne",() => {
  it("renders the component",() => {
    const {rerender} = renderWithRouter(<PageOne path="/pageOne" />,{ route: "/pageOne" });

    rerender(<PageOne path="/pageOne" />);

  });
});

有没有办法配置 rerender 以使用 LocationProvider？我可以拆分我的测试用例而不使用 rerender，或者再次使用 renderWithRouter 但我只是好奇是否有办法解决它。 是否有必要使用rerender。我不使用这种方法，但我只是对它的用例和好处很好奇 - 这只是我的一般知识，对 React 测试库来说仍然是新手。

这是包含简单应用程序和测试文件的代码沙箱的链接： codesandbox

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）