자신의 React 구성 요소 라이브러리를 테스트하는 방법

.NET에서 만든 구성 요소 라이브러리를 테스트할 것입니다. 테스트를 위한 Button 구성 요소가 있습니다.

우리는 React Testing Library을 사용할 것입니다. 설치하려면 이 스크립트를 실행하십시오.

yarn add -D @testing-library/react

CSS 파일을 사용하는 경우

이전 기사에서 알 수 있듯이 CSS 파일을 사용하여 버튼에 스타일을 추가하지만 Jest 기본적으로 이러한 파일을 처리할 수 없으며 테스트가 실패합니다. 테스트를 실행하려면 먼저 CSS 파일을 모의해야 합니다.

그렇게 하려면 프로젝트의 루트에 jest.config.js 파일을 추가하고 아래에 코드를 붙여넣으십시오. 모든 CSS 파일은 identity-obj-proxy 라이브러리에서 처리되어야 한다고 합니다.

module.exports = {
  moduleNameMapper: {
    '\\.(css)$': 'identity-obj-proxy',
  },
};

실행

yarn add -D identity-obj-proxy

이제 테스트 작성을 시작할 수 있습니다.

테스트 작성

첫째, 정확히 우리가 테스트하고 싶은 것을 결정해야 합니다. 버튼이 다른 상태에서 올바르게 렌더링되는지, 그리고 버튼이 클릭 가능/불가능인지 확인해 봅시다. 그래서 지금은 필요하지 않은 템플릿과 주석을 만듭니다.

첫 번째 테스트를 위해 React Testing Library에서 render 함수를 가져와야 합니다. 기본 버튼에 기본 변형이 있는지 확인합니다. 몇 가지 방법이 있습니다. 첫 번째로 화면에서 요소를 검색하는 기능이 필요합니다. 필요한 기능을 포함하는 객체screen를 가져오겠습니다.

다음은 성공 변형을 테스트하는 것입니다. 이러한 테스트를 구현하는 다른 방법을 살펴보겠습니다. querySelector 기능으로 버튼을 찾을 것입니다.

스냅샷 테스트

비활성화 버튼 상태의 경우 스냅샷 테스트를 사용해 보겠습니다. 이 유형의 테스트를 구현하는 세 번째 방법입니다. 이를 위해서는 asFragment에서 가져오는 render 함수가 필요합니다.

테스트를 실행한 후 Jest는 스냅샷을 생성하고 이를 toMatchInlineSnapshot 함수 인수로 테스트에 붙여넣습니다.

다음에 테스트를 실행할 때 Jest는 asFragment 함수의 결과를 이 스냅샷과 비교합니다. 새 스냅샷을 생성할 때마다 기대치를 충족하는지 확인해야 합니다.

이제 버튼을 클릭할 수 있는지 확인하겠습니다. 이를 위해 onClick 함수를 모의하고 버튼에 전달한 다음 fireEvent.click 로 버튼 클릭을 에뮬레이트합니다. 마지막으로 클릭이 완료되었는지, 1회 완료되었는지 확인합니다.

비활성화된 버튼 상태를 테스트하기 위해 동일한 작업을 수행하지만 expect().not.toHaveBeenCalled()를 사용하여 클릭이 완료되지 않았는지 확인합니다. 아래 예 참조:

모든 것이 정상인지 확인하기 위해 모든 테스트를 한 번 더 실행합니다

좋습니다. 내 GitHub에 푸시했습니다. 모든 테스트를 찾을 수 있습니다here

에서는 GitHub 페이지에 스토리북을 배포합니다.