Jest를 사용하여 소품으로 React 구성 요소 시뮬레이션

Jest를 사용하여 소품으로 React 구성 요소 시뮬레이션

React 컴포넌트에는 완전한 효소 마운트를 실행할 때 문제를 일으키는 Redux 스토어 등에 대한 접근에 의존하는 다른 컴포넌트가 포함되어 있습니다.예를 들어 다음과 같은 구조입니다.

import ComponentToMock from './ComponentToMock';

<ComponentToTest>
  ...some stuff
  <ComponentToMock testProp="This throws a warning" />
</ComponentToTest>

의 Jeste를 ..mock()테스트의 문제가 되지 않도록 하위 구성요소를 시뮬레이션하는 방법.

다음과 같은 방법으로 스트레이트 컴포넌트를 시뮬레이션할 수 있습니다.

jest.mock('./ComponentToMock', () => 'ComponentToMock');

이 소품을 소품에 대해 경우 React는 Resact를 합니다).testProp에 됩니다.<ComponentToMock />.

대신 함수를 반환하려고 했지만, JSX(제가 알 수 있는 바로는)가 중지되어 있기 때문에 JSX를 반환할 수 없습니다.이 경우 오류가 발생합니다.

그래서 제 질문은 어떻게 하면

get a) get a) get a)ComponentToMock에게 건네는

b) 테스트에 대해 걱정하지 않는 자 컴포넌트를 조롱하는 데 사용할 수 있는 React 컴포넌트를 반환합니다.

아니면... 더 좋은 방법이 있을까요?

문서 하단에는 호이스트 동작을 방지하기 위한 다음과 같은 주의 사항이 있습니다.

" " " 를 하는 경우: " "babel-jest의 콜, 「」mock자동으로 코드 블록의 맨 위로 올라갑니다.doMock이 동작을 명시적으로 회피하고 싶은 경우.

그런 다음 설명한 대로 수행할 수 있습니다. 테스트할 필요가 없는 컴포넌트의 stub인 함수를 반환합니다.

jest.doMock('./ComponentToMock', () => {
  const ComponentToMock = () => <div />;
  return ComponentToMock;
});

const ComponentToTest = require('./ComponentToTest').default;

스텁 구성 요소는 스냅샷으로 렌더링되므로 이름을 지정하는 것이 좋습니다.

저는 이 질문을 하고 나서 조금 더 알게 되었습니다.다음으로 소품 전달이 필요한 컴포넌트를 조롱하는 대체(더 나은) 방법을 제시하겠습니다.모듈 모의 파일 사용입니다.

.__mocks__예를 들어 컴포넌트 폴더 아래에 있는 폴더입니다.

.
|- /ComponentToMock.js
└- /__mocks__/ComponentToMock.js <-- create this folder/file!

참고: 쓰기 시점부터 폴더를 호출해야 합니다.__mocks__)를 만들어야 .__mocks__컴포넌트를 시뮬레이트할 필요가 있는 각 폴더에 있습니다.이 당신을 할 그냥 이 없는 ) )。 、 、 、 、 、 、 기 if 、 )))))))) ;

다음으로, 이 모의 파일에서 원하는 대로 파일을 쓸 수 있습니다.

// This code would live in ./__mocks__/ComponentToMock.js
import React from 'react';
const ComponentToMock = ({ testProp }) => <div>A mock with '{testProp}' passed!</div>;
export default ComponentToMock;

다음 시험 을 다음과 같이 jest.mock('./ComponentToMock');

때.mock()파라미터가 됩니다.__mocks__폴더입니다.단, 테스트 대상 컴포넌트에 mock 스테이트먼트가 걸려도 mock 자체는 Import에 영향을 주지 않기 때문에 React 컴포넌트를 Import 및 컴파일할 수 있습니다.

이 방법은 소품을 통과해야 하는 모의 부품에 잘 작동하는 것으로 보이며, 그렇지 않으면 무효화된 기능이 반환될 경우 소품 경고를 발생시킬 수 있습니다(단, 소품이 소품을 받지 않은 경우 계속 사용해도 완벽하게 허용됩니다).이게 밖에 있는 사람들에게 도움이 됐으면 좋겠어요.

승인된 답변 외에 여러 내보내기를 사용하는 경우 다음과 같이 조롱할 수 있습니다.

// Component.jsx

export { A, B };

// Component-test.js

jest.mock("../src/Component", () => {
  return {
    A: true,
    B: () => {
      return <></>;
    },
  };
})

레퍼런스 블로그: https://thoughtbot.com/blog/mocking-react-components-with-jest

저 같은 경우에는 모작을 할 수 없었습니다.

대소문자를 구분하는 문제로 판명되었습니다.

모듈 파일 이름:Autosuggest.js

내가 얼마나 조롱했는지:jest.mock('./AutoSuggest', ...); <--잘못된 케이스

Jese 추천으로 기본 내보내기 컴포넌트로 완벽하게 동작합니다.

https://jestjs.io/docs/next/tutorial-react

jest.mock('../SomeDirectory/SomeComponent', () => 'SomeComponent');

const mockComponent = ComponentName => ({ children, ...props }) => (
  <ComponentName {...{ '[mockComponent]': true }} {...props}>
    {children}
  </ComponentName>
);

export default mockComponent;

jest.mock('../ComponentToMock', () => {
  const mockComponent = require('./mockComponent').default;

  return mockComponent('ComponentToMock');
});

언급URL : https://stackoverflow.com/questions/44403165/using-jest-to-mock-a-react-component-with-props