相关疑难解决方法(0)

我正在尝试history.push在新useHistory钩子上模拟react-router并使用@testing-library/react. 我只是像这里的第一个答案一样嘲笑模块：How to test components using new react router hooks?

所以我在做：

//NotFound.js
import * as React from 'react';
import { useHistory } from 'react-router-dom';


const RouteNotFound = () => {
  const history = useHistory();
  return (
    <div>
      <button onClick={() => history.push('/help')} />
    </div>
  );
};

export default RouteNotFound;

//NotFound.js
import * as React from 'react';
import { useHistory } from 'react-router-dom';


const RouteNotFound = () => {
  const history = useHistory(); …

我有如下标题组件：

import { useLocation } from "react-router-dom";

const Header = () => {
   let route = useLocation().pathname; 
   return route === "/user" ? <ComponentA /> : <ComponentB />;
}

您将如何模拟这个 useLocation() 以获取用户路径？

我不能简单地在我的测试文件中调用 Header 组件，因为我收到错误：

类型错误：无法在 useLocation 读取未定义的属性“位置”

describe("<Header/>", () => {
    it("call the header component", () => {
        const wrapper = shallow(<Header />);
        expect(wrapper.find(ComponentA)).toHaveLength(1);
    });
});

我试过看起来类似于链接如何使用新的反应路由器钩子测试组件？但它没有用。

我试过如下：

const wrapper = shallow(
      <Provider store={store}>
        <MemoryRouter initialEntries={['/abc']}>
          <Switch>
            <AppRouter />
          </Switch>
        </MemoryRouter>
      </Provider>,
    );
    jestExpect(wrapper.find(AppRouter)
      .dive()
      .find(Route)
      .filter({path: '/abc'}) …

我正在尝试使用 React Router 的 Enzyme 来测试 url 参数。到目前为止，该应用程序很简单。我有 App.jsx，它有<Router />一个<Switch />组件和两个<Route />组件。

任何帮助将设立一个试验取URL作为理解path的<Route />，并在孩子的路径存根返回一个值<Files />组件。

我对测试完全陌生，所以请链接文档（如果有），并请伪代码或演示您的方法的概述，以便我可以将其放入适当的上下文中。

我还没有看到任何适合我的理解水平的用于测试 URL 参数功能的适当或上下文化的方法。这里有一个答案建议使用 Jest 进行嘲笑，How to test components using new react router hooks？但没有足够的上下文让我实施。

这是 create-react-app 的基本站立：

function App() {
  const [user] = useState(sampleUser);

  return (
    <UserContext.Provider value={user}>
      <SiteHeader />
      <Router>
        <Switch>
          <Route path="/files/:fileId">
            <Files />
          </Route>
          <Route path="*">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <p>
                Edit
                <code>src/App.js</code>
                and save …

我正在使用react-router V6并尝试测试useOutletContext的新功能。我的测试库是testing-library/react，我不确定如何在测试中传递上下文数据。

在 TSX 组件中，我使用 React-router 的钩子获取数据：

const { data } = useOutletContext<IContext>()

我需要类似的东西：

test("render outlet context data view", async () => {
  const { getByTestId } = render(
    <MockedProvider mocks={[mockData]} context={myContextData}>
       <ContextDataView />
    </MockedProvider>
)

MockedProvider 标签来自@apollo/client/testing

context={myContextData} 部分是我需要的

我现在已经在 2 个不同的代码库中看到了这一点，但我很难过，因为它在实际浏览器中运行良好，但在测试中却没有：如果组件使用useParams钩子，则钩子会在测试中引发错误：

错误：未捕获 [类型错误：无法解构accountId“未定义”或“空”的属性。]

我正在使用 React 功能组件、React 测试库和 React-Router：

// 成分：

const Overview: FC = () => {
  const location = useLocation();
  console.log(location) // see below
  const { accountId } = useParams();
  console.log(accountId) // see below

  ... rest
}

控制台日志似乎已正确找到参数：

console.log src/screens/Overview/index.tsx:66 accountId: nodata

console.log src/screens/Overview/index.tsx:64 location: { pathname: '/mix/overview/nodata', search: '', hash: '', state: undefined, key: 'bn6zvv' }

// 使用RTL 文档中推荐的包装器测试设置

function renderWithProviders(
  ui,
  {
    route = '/',
    params = routes.root, 
    history …