web-dev-qa-db-ja.com

JESTを使用してReact-Router-DOMフックが機能していません

URL ParamsからIDを取得するためにuseParamsフックを使用するコンポーネントをテストするために酵素の浅い方法を使用しています。

useParamsフックを嘲笑しようとしているので、実際のメソッドを呼び出すのではなく機能しません。私はまだTypeError: Cannot read property 'match' of undefined、それは実際のuseParamsを呼び出して、私のモックではありません。

私のコンポーネント：

import React from 'react';
import { useParams } from 'react-router-dom';

export default () => {

  const { id } = useParams();

  return <div>{id}</div>;

};
 _

テスト：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import React from 'react';
import Header from './header';
import { shallow } from 'enzyme';

Enzyme.configure({ adapter: new Adapter() });

describe('<Header />', () => {

  jest.mock('react-router-dom', () => ({
    useParams: jest.fn().mockReturnValue({ id: '123' }),
  }));

  it('renders', () => {
    const wrapper = shallow(<Header />);
    expect(wrapper).toBeTruthy();
  });

});
 _

ありがとうございました！

reactjsreact-routerjestjsenzymereact-hooks
10
Maxime Côté

私はこのモックを試してみましたが、それは私には機能しません。エラー：未定義のプロパティ 'match'を読み取れません。コンポーネントがルータの内側にないように、パラメータとのマッチをモックすることはできません。それは私に働きます：

import { MemoryRouter, Route } from 'react-router-dom';

const RenderWithRouter = ({ children }) => (
  <MemoryRouter initialEntries={['uri/Ineed']}>
    <Route path="route/Ineed/:paramId">{children}</Route>
  </MemoryRouter>
);
const tf = new TestFramework();
describe('<MyComponent />', () => {
  tf.init({ title: 'Some test' }, props =>
    shallow(
      <RenderWithRouter>
        <MyComponent {...props} />
      </RenderWithRouter>
    )
  );

  it('Some description', () => {
    const wrapper = tf.render().html();
    expect(wrapper).toContain('something');
  });
});
 _
3
Diego Díaz

私は同様の問題がありました、私はこのような解決しました：

import { Route, Router } from "react-router-dom";
import { createMemoryHistory } from "history";

const renderWithRouter = (component) => {
  const history = createMemoryHistory({
    initialEntries: ["/part1/idValue1/part2/idValue2/part3"],
  });
  const Wrapper = ({ children }) => (
    <Router history={history}>
      <Route path="/part1/:id1/part2/:id2/part3">{children}</Route>
    </Router>
  );
  return {
    ...render(component, { wrapper: Wrapper }),
    history,
  };
};

describe("test", () => {
  it("test desc", async () => {
    const { getByText } = renderWithRouter(<MyComponent/>);
    expect(getByText("idValue1")).toBeTruthy();
  });
});
 _
0
Vity