相关疑难解决方法(0)

你如何使用浅层测试酶 Reactjs 模拟 useLocation() 路径名?

我有如下标题组件:

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

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

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

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

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

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

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

我试过如下:

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

reactjs jestjs react-router enzyme

22
推荐指数
3
解决办法
2万
查看次数

标签 统计

enzyme ×1

jestjs ×1

react-router ×1

reactjs ×1