useState() 후크를 사용하여 기능 컴포넌트를 테스트할 때 상태를 설정합니다.

useState() 후크를 사용하여 기능 컴포넌트를 테스트할 때 상태를 설정합니다.

내가 효소로 클래스 성분을 검사했을 때 나는 할 수 있었다.wrapper.setState({})상태를 설정합니다.기능 컴포넌트를 테스트하고 있는데 어떻게 하면 동일한 작업을 수행할 수 있습니까?useState()후크?

예를 들어 내 컴포넌트에는 다음이 있습니다.

const [mode, setMode] = useState("my value");

그리고 나는 변하고 싶다.mode내 시험 안에

훅에서 스테이트를 사용하는 경우 테스트에서는 스테이트 등의 구현 세부사항을 무시하여 적절하게 테스트해야 합니다.컴포넌트가 자녀에게 올바른 상태를 전달하는지 확인할 수 있습니다.

당신은 Kent C가 쓴 이 블로그 게시물에서 좋은 예를 찾을 수 있습니다.도드.

여기 코드 예시와 함께 발췌한 내용이 있습니다.

상태 구현 세부 정보에 의존하는 테스트 -

test('setOpenIndex sets the open index state properly', () => {
  const wrapper = mount(<Accordion items={[]} />)
  expect(wrapper.state('openIndex')).toBe(0)
  wrapper.instance().setOpenIndex(1)
  expect(wrapper.state('openIndex')).toBe(1)
})

상태 구현 세부 정보에 의존하지 않는 테스트 -

test('counter increments the count', () => {
  const {container} = render(<Counter />)
  const button = container.firstChild
  expect(button.textContent).toBe('0')
  fireEvent.click(button)
  expect(button.textContent).toBe('1')
})

이게 내가 찾은 방법이지, 이게 옳고 그름을 말하는 게 아니야.제 경우, 코드 블록은 특정 값으로 설정된 상태에 의존합니다.테스트에 대한 제 의견은 '리액트 투 나 자신에게'에서 유지하겠습니다.

테스트 파일:리액트 라이브러리의 Import를 조정합니다.

import * as React from 'react'

다음으로 useState 테스트스파이에서 구현 시뮬레이션을 실시합니다.

const stateSetter = jest.fn()
jest
.spyOn(React, 'useState')
//Simulate that mode state value was set to 'new mode value'
.mockImplementation(stateValue => [stateValue='new mode value', stateSetter])

모의 useState는 테스트에 대해 useState를 호출하는 모든 인스턴스에 해당되므로 여러 상태 값이 있는 경우 모두 'new mode value'로 설정됩니다.다른 사람이 그 문제를 해결해 줄 수 있을 겁니다.도움이 됐으면 좋겠다.

테스트 파일 맨 위에 먼저 다음과 같이 정의할 수 있습니다.

  import { useState } from 'react';

  jest.mock('react', () => ({
    ...jest.requireActual('react'),
    useState: jest.fn()
  }));

  const useStateMock: jest.Mock<typeof useState> = useState as never;

그 후 각 테스트에서 테스트하고자 하는 다른 값으로 사용할 수 있습니다.

  const setValue = jest.fn();
  useStateMock
    .mockImplementation(() => ['value', setValue]);

언급URL : https://stackoverflow.com/questions/55342181/set-state-when-testing-functional-component-with-usestate-hook