반응 후크 - 여러 가지 사용 상태 후크를 테스트하는 방법

반응 후크 - 여러 가지 사용 상태 후크를 테스트하는 방법

주 후크가 거의 없는 구성 요소가 있음:

const [resizing, setResizing] = React.useState(false);
const [x, setX] = React.useState(0);
const [y, setY] = React.useState(0);

그리고 어떤 곳에서는 한 번에 두 개 이상의 갈고리를 부르고 있다. 예를 들어, 여기에서는onResize, 나는 둘 다에게 전화한다.setResizing그리고setX또는setY훅:

<ResizableBox
    height={520}
    width={370}
    minConstraints={[370, 520]}
    maxConstraints={[Infinity, Infinity]}
    className={classes.resizable}
    onResize={(e) => {
      if (e.movementX !== 0) {
        setResizing(true);
        setX((prev) => prev + e.movementX);
      } else if (e.movementY !== 0) {
        setResizing(true);
        setY((prev) => prev + e.movementY / 2);
      }
    }}
    onResizeStop={() => {
      setResizing(false);
    }}
  >

나는 상태 변화를 테스트하기 쉬운 클래스 구성요소를 테스트하는 것에 익숙하다.

다음과 같은 방법으로 테스트해 보고자 한다.

const setXSpy = jest.spyOn(React, 'setX');
const setYSpy = jest.spyOn(React, 'setY');
const setResizeSpy = jest.spyOn(React, 'setResize');


it('calls useState hooks correctly', () => {
  resizableBox.props.onResize({movementX: 1});

  expect(setXSpy).toHaveBeenCalledWith(1);
  expect(setYSpy).not.toHaveBeenCalled();
  expect(setResizeSpy).toHaveBeenCalledWith(true);
});

하지만 이 예에서 테스트 후크는 어떻게 생겼는지 잘 모르겠어.

당신은 좋은 아이디어가 아닌 그 요소의 구현 세부사항을 테스트하고 있다. (당신은 기본적으로 그 구현에 테스트를 결합하는 것이지, 그 구성 요소가 무엇을 해야 하는지를 결정하기 위해 테스트를 사용하는 것이 아니다.)

대신 사용자처럼 구성 요소를 테스트하여 출력이 올바른지 확인하는 방법을 찾아보겠다.

먼저 테스트 라이브러리를 통합한 다음 여기에 설명된 패턴을 따르십시오.

문제는, 뭘 시험하려는 거야?이 테스트의 예상 결과는 무엇이며 어떤 행동을 포함할 것인가?

LE: 당신의 경우, 리액션 가능 여부를 테스트하려고 하는 것으로 보아, 다음 작업을 시도해 보십시오.mouseDown크기 조정 핸들에 놓고 방출한다.mouseMove그리고mouseUp올바른 일이 발생하는지(코드로부터 상태 값을 사용하여 무엇을 하고 있는지, 무엇을 위해 사용하고 있는지 알 수 없음)

참조URL: https://stackoverflow.com/questions/63825638/react-hooks-how-to-test-multiple-usestate-hooks