DOM 테스트 Next.js 애플리케이션

이 문서에서는 Next.js에서 DOM 테스트의 현재 상태를 분석하고 유틸리티 라이브러리(next-page-tester)를 제공하여 Next.js 앱과 함께 DOM 통합 테스트를 다시 가져옵니다.

사라진 타일

Next.js은 뛰어난 도구 벨트와 함께 제공되어 첫날부터 모든 웹 프로젝트에 뛰어난 개발 경험과 생산성을 제공합니다.

Next.js가 제공하는 가치는 정말 귀중하지만 누락된 타일이 있습니다. DOM 통합 테스트(간단히 말하면 React Testing Library 또는 Enzyme 테스트)는 Next.js에 관해서는 매우 비효율적이고 단편적입니다.

이유를 보자.

왜

평균적인 Next.js 프로젝트는 next dev 또는 next build 의 Next.js 내부에 의해 함께 붙어 있는 분리된 조각으로 구성됩니다.

이것은 더 적은 상용구 코드 👍뿐만 아니라 별도의 부분 간의 명시적 관계도 😔 없음을 의미합니다. 즉, Next.js만이 애플리케이션을 구성하는 방법을 알고 있습니다.

이것은 Next.js 앱에 대한 단위 테스트가 작성되는 방식에 영향을 미칩니다. 즉, 서로 다른 부분을 대상으로 하는 격리된 테스트와 그 사이에 있는 것을 낙관적으로 조롱하는 것입니다.

좀 더 명확하게 합시다. 여기에는 다음이 포함됩니다.

예상되는 서버측 생성 소품을 제공하는 개별 페이지 구성 요소 테스트

테스트 페이지' data fetching methods ( getServerSideProps 및 getStaticProps ) 예상되는 context 객체

제공

테스트된 페이지가 Next의 NextRouter object , path 을 사용할 때 관련 현재 경로 데이터( params , querystring , Link ...)로 조롱 useRouter or withRouter

Next.js가 파일 시스템 라우팅을 구성하는 데 의존하기 때문에 페이지 파일 이름이 100% 정확하기를 바랍니다

.

사용자 지정 App 및 Document 구성 요소 렌더링, 경우에 따라

이 모든 것이 가능하지만 Node.js에서 전체 구성 요소 트리를 JSDOM로 렌더링하여 통합 테스트를 작성할 수 있는 시대는 어디입니까?

테스트를 작성합니다. 너무 많지 않습니다. 대부분 통합.

비즈니스 로직이 서로 연결되지 않은 여러 위치에 분산되어 있기 때문에(및 Next.js가 웹 서버를 실행한다는 사실) 현재suggested way of testing Next.js applications는 앱의 완전한 인스턴스에 대해 e2e 테스트를 실행하는 것으로 구성됩니다.

Cypress 및 Test Café 과 같은 도구가 등장하면서 e2e 테스터의 삶이 훨씬 쉬워졌지만 삶의 모든 것과 마찬가지로 there's no silver bullet™ 및 브라우저 테스트도 예외는 아닙니다. 올바른 작업에 적합한 도구를 사용할 수 있다면 좋을 것입니다.

인터넷에는 다양한 테스트 전략의 장단점을 문서화하는 리소스가 가득합니다. 대부분 비용, 속도 및 결정론의 문제입니다. This is a popular article by Kent C. Dodds to name one 🔗 .

Next.js에 대한 DOM 통합 테스트

이상적으로는 유망한 통합 테스트 루틴은 경로별로 Next.js 앱을 테스트하는 것으로 구성될 수 있습니다. 경로 경로가 주어지면 모든 DOM 테스트 라이브러리로 테스트할 준비가 된 일치하는 페이지 요소를 받습니다.

const Page = getNextJsPage('/blog/1');
render(Page);

이러한 테스트 루틴에 도달하려면 Next.js 접착제의 일부를 복제해야 합니다.

제공된 경로를 일치하는 페이지 구성 요소로 확인

Next.js 데이터 가져오기 메서드 호출( getServerSideProps , getInitialProps 또는 getStaticProps )

예상되는 모의 제공자 설정next/router

사용자 지정 _app/_document 구성 요소

로 래핑 페이지

예상되는 소품으로 페이지 구성 요소 인스턴스화

Link , router.push , router.replace를 통해 클라이언트 측 탐색을 에뮬레이션합니다.

다음과 같은 접근 테스트를 가능하게 하는 유틸리티 라이브러리인 next-page-tester에 이 논리를 결합했습니다.

import { screen, fireEvent } from '@testing-library/react';
import { getPage } from 'next-page-tester';

describe('Blog page', () => {
  it('renders blog page', async () => {
    const { render } =  await getPage({
      route: '/blog/1',
    });

    render();
    expect(screen.getByText('Blog')).toBeInTheDocument();

    fireEvent.click(screen.getByText('Link'));
    await screen.findByText('Linked page');
  });
});

next-page-tester는 available on NPM이며 DOM 통합 테스트를 Next.js의 첫 번째 시민으로 만드는 것을 목표로 합니다.

Typescript로 작성되었으며 완전히 테스트되었으며 호기심 많은 Next.js 사용자로부터 피드백을 받을 수 있도록 열려 있습니다. 작동 방식을 확인하려면 next-page-tester GitHub page으로 이동하거나 손을 빌려주세요 :).