web-dev-qa-db-ja.com

浅いテスト酵素Reactjsを使用して、useLocation（）パス名をどのように模倣しますか？

以下のようなヘッダーコンポーネントがあります：

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

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

このuseLocation（）をどのようにモックしてユーザーとしてパスを取得しますか？

エラーが発生しているため、テストファイルで以下のように単純にヘッダーコンポーネントを呼び出すことはできません。

TypeError：useLocationで未定義のプロパティ 'location'を読み取れません

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'})
      .renderProp('render', { history: mockedHistory})
      .find(ContainerABC)
    ).toHaveLength(1);

リンクから Shallowレンダリングを使用したreact-routerのテスト が機能しませんでした。

私にお知らせください。

前もって感謝します。

reactjsreact-routerjestjsenzyme
5
purmo037

これはあなたの質問への直接の回答ではないことはわかっていますが、ブラウザの場所や履歴をテストしたい場合は、mountを使用し、最後にRouteを追加できます。履歴オブジェクトと位置オブジェクトを「キャプチャ」できます。

test(`Foobar`, () => {
  let testHistory
  let testLocation

  const wrapper = mount(
    <MemoryRouter initialEntries={[`/`]}>
      <MyRoutes />
      <Route
        path={`*`}
        render={routeProps => {
          testHistory = routeProps.history
          testLocation = routeProps.location
          return null
        }}/>
    </MemoryRouter>
  )

  // Manipulate wrapper

  expect(testHistory)...
  expect(testLocation)...
)}
2
Alf

やってみました：

describe("<Header/>", () => {
    it("call the header component", () => {
        const wrapper = shallow(<MemoryRouter initialEntries={['/abc']}><Header /></MemoryRouter>);
        expect(wrapper.find(Header).dive().find(ComponentA)).toHaveLength(1);
    });
});

浅いを使用すると、最初のlvlのみがレンダリングされるため、ダイビングを使用して別のコンポーネントをレンダリングする必要があります。

0
Kaca992