반응 후크를 테스트하는 방법 ... 반응 후크를 테스트하지 않음으로써

React 라이프사이클 방법은 테스트하기가 어렵습니다. 구성 요소가 두 번 마운트되었는지 어떻게 알 수 있습니까? 어떻게 테스트합니까? React의 내부 동작의 일부이기 때문에 왜 그래야 합니까? 다음은 React hooks를 테스트하기 시작한 방법입니다... 전혀 테스트하지 않음으로써!

내 구성 요소가 작성되어 있고 다음과 같이 useEffect 후크를 사용하여 내 API의 일부 메시지를 업데이트한다고 가정해 보겠습니다.

    useEffect(() => {
    if (data) {
        const messagesToUpdate = getAllMessagesToUpdate(data);
        messagesToUpdate &&
            messagesToUpdate.forEach(edge => {
                updateMessage({
                    variables: {
                        UpdateMessageInput: {
                            id: edge.node.id,
                            read: true,
                        },
                    },
                });
            });
    }
    }, [data, updateMessage]);

이 호출의 각 순열을 어떻게 테스트합니까? useEffect가 호출될 때마다 이 메시지가 예상대로 작동하는지 확인할 수 있도록 렌더링 주기를 조롱해야 합니다.

여기 대안이 있습니다. useEffect 호출을 자체 후크로 추상화하고 기능을 별도의 함수로 추상화합니다.

// in my main component
useUpdateMessages(data, updateMessage);

// in my hook
export function useUpdateMessages(data, updateMessage) {
   useEffect(() => {
        updateMessages(data, updateMessage);
    }, [data, updateMessage]);
}

// in my standalone function
export function updateMessages(data, updateMessage) {
    if (data) {
        const messagesToUpdate = getAllMessagesToUpdate(data);
        messagesToUpdate &&
            messagesToUpdate.forEach(edge => {
                updateMessage({
                    variables: {
                        UpdateMessageInput: {
                            id: edge.node.id,
                            read: true,
                        },
                    },
                });
            });
    }
}

이제 React 수명 주기 방법에 대해 걱정할 필요가 없습니다. 내가 원하면 내 후크를 테스트할 수 있지만 여기에서는 거의 가치가 없어 보입니다. 내가 원한다면 react-hooks-testing-library을 사용하여 그렇게하는 것이 더 쉬울 것입니다.

또한 독립 실행형 기능을 테스트하는 것에 대해서만 걱정하면 됩니다. 이제 React의 내부 메커니즘에서 분리되어 훨씬 더 쉽게 수행할 수 있습니다.

나는 이 접근 방식을 아주 좋아한다. 사용 중인 프레임워크에서 코드를 분리합니다. 움직이는 부분이 더 많더라도 훨씬 더 쉬운 테스트와 훨씬 더 깔끔한 코드를 용이하게 할 수 있습니다.

이 아이디어에 대한 내 동료 Stuart Nichols에게 감사합니다!