next page tester
1.0.0
Next.js는 개발 과정을 수강 하여이 라이브러리가 사용하지 않는 테스트 접근 방식을 사용합니다. 다음 페이지 테스터 관리자는 대신 브라우저 테스트를 사용하는 것이 좋습니다.
Next.js의 누락 된 DOM 통합 테스트 도구
Next.js Route가 주어지면,이 라이브러리는 JSDOM에서 일치하는 페이지를 Next.js의 라우팅 시스템 및 데이터 가져 오기 메소드 에서 파생 된 예상 소품을 제공합니다.
import { getPage } from 'next-page-tester' ;
import { screen , fireEvent } from '@testing-library/react' ;
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' ) ;
} ) ;
} ) ; 이 라이브러리의 아이디어는 다음과 같은 방식으로 가능한 한 밀접하게 재현하는 것입니다 .JS는 서버를 회전시키지 않고 작동하고 로컬 JSDOM 환경에서 출력을 렌더링하는 것입니다.
귀중한 테스트 경험을 제공하기 위해 next-page-tester 실제 next.js 응용 프로그램의 렌더링 흐름을 복제합니다.
head 요소 포함) 장착 응용 프로그램은 대화식 이며 모든 DOM 테스트 라이브러리 (예 : @testing-library/react )에서 테스트 할 수 있습니다.
next-page-tester 을 처리합니다.
getServerSideProps getInitialProps getStaticProps_app 및 _document 구성 요소가있는 래핑 페이지Link , router.push , router.replace 를 통해 클라이언트 측 탐색 에뮬레이션redirect 리턴next/router , next/head , next/link , next/config 및 환경 변수 지원 getPage 옵션 객체를 수락하고 4 값을 반환합니다.
import { getPage } from 'next-page-tester' ;
const { render , serverRender , serverRenderToString , page } = await getPage ( {
options ,
} ) ; 유형 : () => { nextRoot: HTMLElement<NextRoot> }
반환 : #__next 루트 요소 요소.
고급 유스 케이스가 없으면 대부분이 방법을 사용해야합니다. 후드 아래에서는 serverRender() 호출 한 다음 반응 응용 프로그램을 jsdom #__next 루트 요소로 마운트/수화합니다. 이것이 사용자가 페이지를 방문 할 때 얻거나 볼 수있는 것입니다.
유형 : () => { nextRoot: HTMLElement<NextRoot> }
반환 : #__next 루트 요소 요소.
서버 측의 출력을 DOM으로 렌더링하지만 반응을 마운트하지는 않습니다. 다음 시나리오에서 JS 렌더링 방법을 테스트하는 데 사용하십시오.
유형 : () => { html: string }
서버 측 렌더링의 출력을 HTML 문자열로 렌더링합니다. 이것은 부작용이없는 순수한 방법입니다.
유형 : React.ReactElement<AppElement>
응용 프로그램의 요소를 반응합니다.
| 재산 | 설명 | 유형 | 기본 |
|---|---|---|---|
| 루트 (필수) | 다음 경로 ( / 부터 시작해야합니다) | string | - |
| req | 기본 조롱 요청 객체를 향상시킵니다 | req => req | - |
| 해안 | 기본 조롱 된 응답 객체를 향상시킵니다 | res => res | - |
| 라우터 | 기본 조롱 된 다음 라우터 개체를 향상시킵니다 | router => router | - |
| useapp | 사용자 정의 앱 구성 요소를 렌더링합니다 | boolean | true |
| 문서 구성 요소를 렌더링합니다 | boolean | false | |
| Nextroot | Next.js 루트 폴더의 절대 경로 | string | 자동 감지 |
| dotenvfile | .env 파일에 대한 상대 경로를 보유하는 환경 변수 | string | - |
| 포장지 | 포장지 파일의 절대 경로. 조롱 된 공급자로 구성 요소 트리를 장식하는 데 유용합니다. | string | - |
| 주식 모듈 | 클라이언트와 서버 컨텍스트 간의 신원을 보존 해야하는 모듈 목록. | string[] | [] |
페이지/구성 요소가 Node.js (예 : 스타일 시트, 이미지, .svg , ...)에 의해 기본적으로 처리되지 않는 경우 테스트 환경을 구성하여 올바르게 처리해야합니다. 예를 들어, 농담의 경우 moduleNameMapper 구성하는 것이 좋습니다.
next-page-tester JSDOM 환경에 들어갈 것으로 기대합니다. Jest를 사용하는 경우이 줄을 jest 구성에 추가합니다.
"testEnvironment" : "jsdom" , Next.js는 JSDOM 환경에서 실행되도록 설계되지 않았으므로 더 부드러운 테스트 경험을 허용하기 위해 기본 JSDOM을 설정 해야합니다. 기본적으로 next-page-tester 과 같습니다.
window.scrollTo 및 IntersectionObserver mocks를 제공하십시오 그러나 NPT_SKIP_AUTO_SETUP env 변수를 true 로 설정하여 자동 정리 및 헬퍼 초기화를 건너 뛰도록 선택할 수 있습니다. cross-env 와 같은 작업을 수행 할 수 있습니다.
cross - env NPT_SKIP_AUTO_SETUP = true jestJest v26을 사용하는 경우 적절한 서버/클라이언트 환경으로 모듈을로드하려면 패치해야 할 수도 있습니다. 유지 보수 노력은 최신 JEST 버전을 대상으로합니다.
예제 폴더 아래에서 next-page-tester 활성화하는 테스트 사례를 문서화하고 있습니다.
next-page-tester Next.js 및 Jest의 마지막 버전 만 지원하는 데 중점을 둡니다.
| 차세대 테스터 | 다음 .js | 농담 |
|---|---|---|
| v0.1.0-> V0.7.0 | v9.xx | v26.xx |
| v0.8.0-> V0.22.0 | v10.0.0-> v10.0.7 | |
| V0.23.0-> V0.25.x | v10.0.8-> v11.0.x | |
| V0.26.0-> V0.27.x | v10.0.8-> v11.0.x | v27.xx |
| V0.28.0-> V0.28.x | v11.1.0 | |
| V0.29.0 + | v11.1.1-> v11.x | |
| V0.31.0 + | v12.1.0 | |
| V0.32.0 + | v12.1.1 + |
부터:
다음 버전의 Next.js에 대한 지원을 보장 할 수는 없습니다. 패치 나 사소한 버전조차 파손될 수 있습니다. 이 경우 새로운 next-page-tester 버전이 출시 될 때까지 기다려야합니다.
기부금은 매우 환영하며 외부 기고자를 지원하기 위해 최선을 다합니다.
req 및 res 객체는 Node-mocks-http로 조롱됩니다.strict 모드로 TypeScript를 사용할 때 @types/react-dom 및 @types/webpack 설치해야 할 수도 있습니다.useDocument 옵션 useDocument 옵션은 부분적으로 구현되어 불안정 할 수 있습니다.
네트워크 요청을 조롱하는 첫 번째 제안 방법은 Mock service worker 및 Mirage JS 와 같은 라이브러리가있는 네트워크 계층에서 조롱하는 것으로 구성됩니다.
또 다른 실행 가능한 접근 방식은 fetch-mock 과 같은 라이브러리로 Global fetch Object를 조롱하는 것으로 구성 될 수 있습니다.
데이터를 가져 오는 사용자 랜드 모듈을 조롱하는 것과 관련된보다 전통적인 접근 방식을 원한다면 추가 단계를 고려해야합니다. next-page-tester "클라이언트"와 "서버"렌더링 사이의 모듈을 분리하기 때문에 테스트에서 생성 된 모의는 서버 컨텍스트에서 실행되지 않습니다 (예 : 데이터 페치 방법).
이를 극복하기 위해, 우리는 그러한 모듈을 "클라이언트"와 "서버"컨텍스트 사이의 정체성을 sharedModules 옵션 옵션을 통과시켜 (보존/공유) "오염"해야합니다.
test ( 'as a user I want to mock a module in client & server environment' , async ( ) => {
const stub = jest . spyOn ( api , 'getData' ) . mockReturnValue ( Promise . resolve ( 'data' ) )
const { render } = await getPage ( {
route : '/page' ,
nextRoot ,
sharedModules : [ ` ${ process . cwd ( ) } /src/path/to/my/module` ] ,
} ) ;
expect ( stub ) . toHaveBeenCalledTimes ( 1 ) ; // this was executed in your data fetching method
} getPage 에 전화하기 전에 쿠키를 document.cookie 에 추가하여 쿠키를 설정할 수 있습니다. next-page-tester 쿠키를 ctx.req.headers.cookie 로 전파하여 데이터 가져 오기 방법을 사용할 수 있습니다. 이는 클라이언트 측 탐색에 의해 트리거 된 후속 페치 메소드 호출에도 적용됩니다.
test ( 'authenticated page' , async ( ) => {
document . cookie = 'SessionId=super=secret' ;
document . cookie = 'SomeOtherCookie=SomeOtherValue' ;
const { render } = await getPage ( {
route : '/authenticated' ,
} ) ;
render ( ) ;
} ) ; 참고 : document.cookie 자동으로 정리되지 않습니다. 모든 테스트 후에는 모든 것을 분리하여 수동으로 지우야합니다.
다음 .js Link 구성 요소는 jsdom 환경에서 구현되지 않은 Click에서 window.scrollTo 호출합니다. 오류를 해결하려면 테스트 환경을 설정하거나 자신의 window.scrollTo 제공해야합니다 .Scrollto Mock.
이 경고는 페이지가 서버와 브라우저간에 다르게 렌더링한다는 것을 의미합니다. 이것은 코드에서 예상되는 동작 또는 신호가 될 수 있습니다.
이 경고는 렌더링 프로세스 중 응용 프로그램이 조롱되지 않은 네트워크 요청을 수행한다는 것을 의미합니다. 필요에 따라 그들을 찾아 조롱해야합니다.
trailingSlash 옵션을 고려하십시오_error 페이지를 렌더링합니다debug 옵션을 제공하십시오 이 멋진 사람들에게 감사드립니다 (이모티콘 키) :
안드레아 카라로 ? | Matej Šnuderl ? | 제이슨 윌리엄스 ? | Arelaxend ? | Kfazinic ? | 토마스 즈 론 디오 ? | 알렉산더 멘데스 |
Jan Sepke ? | Davidorchard ? | DOAA ISMAEL ? | Andrew Hurle ? | Massimeddu-Sonic ? | Jess Telford ? | 조셉 ? |
Gergo Tolnai ? | 브렛 ? | 블라드 엘라 린 | 다니엘 스톡 맨 | 마데 도즈 | 데릭 오스틴 박사 ? | 두려움 ? |
Jan R. Biasi ? | 오타비오 오거스토 소워 ? |
이 프로젝트는 All-Contritors 사양을 따릅니다. 모든 종류의 공헌을 환영합니다!
