Как вы имитируете useLocation () путь, используя неглубокий тестовый фермент Reactjs? - PullRequest
Новая
       15

Как вы имитируете useLocation () путь, используя неглубокий тестовый фермент Reactjs?

1 голос
/ 28 января 2020

У меня есть компонент заголовка, как показано ниже: 

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

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

Как вы будете насмехаться над этим useLocation (), чтобы получить путь от имени пользователя?

Я не могу просто вызвать компонент Header, как показано ниже в мой тестовый файл, когда я получаю сообщение об ошибке:

TypeError: Невозможно прочитать свойство 'location' undefined при использовании 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'})
      .renderProp('render', { history: mockedHistory})
      .find(ContainerABC)
    ).toHaveLength(1);

по ссылке Тестирование реакции-маршрутизатор с неглубоким рендерингом , но он не работал.

Пожалуйста, дайте мне знать.

Заранее спасибо.

Ответы [ 3 ]

3 голосов
/ 11 февраля 2020

Я обнаружил, что могу смоделировать перехватчики React Router, такие как useLocation, используя следующий шаблон: 

import React from "react"
import ExampleComponent from "./ExampleComponent"
import { shallow } from "enzyme"

jest.mock("react-router-dom", () => ({
  ...jest.requireActual("react-router-dom"),
  useLocation: () => ({
    pathname: "localhost:3000/example/path"
  })
}));

describe("<ExampleComponent />", () => {
  it("should render ExampleComponent", () => {
    shallow(<ExampleComponent/>);
  });
});

Если у вас есть вызов useLocation в вашем ExampleComponent, вышеупомянутый шаблон должен позволить вам поверхностно отрисовать компонент в тесте Фермент / Шут без ошибок. Надеюсь, это поможет!

1 голос
/ 05 марта 2020

Я знаю, что это не прямой ответ на ваш вопрос, но если вы хотите проверить местоположение браузера или историю, вы можете использовать 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)...
)}
0 голосов
/ 28 января 2020

Вы пробовали: 

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, поэтому вам нужно использовать dive для рендеринга другого компонента.

...