next page tester
1.0.0
Next.js tomó un curso de desarrollo que hace que el enfoque de prueba adoptado por esta biblioteca sea obsoleto. Siguiente página Los evaluadores de los probadores sugieren usar las pruebas del navegador, en su lugar.
La herramienta de prueba de integración DOM faltante para Next.js.
Dada una ruta Next.js, esta biblioteca hará la página coincidente en JSDOM , proporcionada con los accesorios esperados derivados del sistema de enrutamiento de Next.js y los métodos de recuperación de datos .
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' ) ;
} ) ;
} ) ; La idea detrás de esta biblioteca es reproducirse lo más cerca posible de la forma siguiente.
Para proporcionar una experiencia de prueba valiosa next-page-tester replica el flujo de representación de una aplicación real. next.js :
head ) La aplicación montada es interactiva y se puede probar con cualquier biblioteca de prueba DOM (como @testing-library/react ).
next-page-tester se encargará de:
getServerSideProps , getInitialProps o getStaticProps ) si el caso_app y _documentLink , router.push , router.replaceredirect de las páginasnext/router , next/head , next/link , next/config and Environment Variables getPage acepta un objeto de opción y devuelve 4 valores:
import { getPage } from 'next-page-tester' ;
const { render , serverRender , serverRenderToString , page } = await getPage ( {
options ,
} ) ; Tipo: () => { nextRoot: HTMLElement<NextRoot> }
Devuelve: #__next Root Element Element.
A menos que tenga un caso de uso avanzado, debe usar principalmente este método. Debajo del capó llama serverRender() y luego monta/hidrata la aplicación React en el elemento Root JSDOM #__next . Esto es lo que los usuarios obtendrían/verían cuando visiten una página.
Tipo: () => { nextRoot: HTMLElement<NextRoot> }
Devuelve: #__next Root Element Element.
Inyecte la salida de la representación del lado del servidor al DOM pero no se monte reaccione. Úselo para probar cómo se reproduce el siguiente.js en los siguientes escenarios:
Tipo: () => { html: string }
Renderiza la salida del lado del servidor como cadena HTML. Este es un método puro sin efectos secundarios.
Tipo: React.ReactElement<AppElement>
El elemento react de la aplicación.
| Propiedad | Descripción | tipo | Por defecto |
|---|---|---|---|
| ruta (obligatoria) | Siguiente ruta (debe comenzar con / ) | string | - |
| req | Mejorar el objeto de solicitud simulado por defecto | req => req | - |
| resonancia | Mejorar el objeto de respuesta simulada predeterminada | res => res | - |
| enrutador | Mejorar el objeto de enrutador del siguiente enrutador. | router => router | - |
| uspp | Renderiza el componente de la aplicación personalizada | boolean | true |
| Presentar componente del documento | boolean | false | |
| nextroot | Camino absoluto a la carpeta Root de Next.js | string | detectado automáticamente |
| dotenvfile | Ruta relativa a una .env variables de entorno de retención de archivos | string | - |
| envolturas | Ruta absoluta al archivo de envoltores. Útil para decorar el árbol de componentes con proveedores burlados. | string | - |
| módulos compartidos | Lista de módulos que deben preservar la identidad entre el contexto del cliente y el servidor. | string[] | [] |
Si sus páginas/componentes importan tipos de archivos no manejados de forma nativa por Node.js (como hojas de estilo, imágenes, .svg , ...), debe configurar su entorno de prueba para procesarlos correctamente. Por ejemplo, en el caso de Jest, es posible que desee configurar algún moduleNameMapper .
next-page-tester espera encontrarse con un entorno JSDOM. Si usa Jest, agregue esta línea a su configuración jest :
"testEnvironment" : "jsdom" , Dado que Next.js no está diseñado para ejecutar en un entorno JSDOM, necesitamos configurar el JSDOME predeterminado para permitir una experiencia de prueba más suave. De forma predeterminada, next-page-tester :
window.scrollTo e IntersectionObserver Sin embargo, puede optar por omitir la inicialización de la limpieza automática y la inicialización de los ayudantes configurando la variable NPT_SKIP_AUTO_SETUP ENV en true . Puedes hacer esto con cross-env como así:
cross - env NPT_SKIP_AUTO_SETUP = true jestSi usa Jest V26, es posible que deba parchearlo para cargar módulos con entornos de servidor/cliente adecuados. Los esfuerzos de mantenimiento se dirigirán a la última versión de Jest.
En la carpeta de ejemplos, estamos documentando los casos de prueba que habilita next-page-tester .
next-page-tester se centra en apoyar solo la última versión de Next.js and Jest:
| o próxima página | Next.js | Broma |
|---|---|---|
| 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 + |
Desde:
Tenga en cuenta que no podemos garantizar el soporte para futuras versiones de Next.js fuera de la caja. Incluso el parche o las versiones menores podrían romperse. En este caso, tendrá que esperar a que se lance una nueva versión next-page-tester .
Las contribuciones son muy bienvenidas y hacemos todo lo posible para apoyar a los contribuyentes externos.
req y res se burlan de Node-Mocks-HTTP@types/react-dom y @types/webpack cuando se usa typeScript en modo strict debido a este erroruseDocument La opción useDocument se implementa parcialmente y puede ser inestable.
La primera forma sugerida de simular las solicitudes de red, consiste en burlarse de la capa de red con bibliotecas como Mock service worker y Mirage JS .
Otro enfoque viable podría consistir en burlarse del objeto Global fetch con bibliotecas como fetch-mock .
En caso de que desee un enfoque más tradicional que implique burlarse de los módulos de tierras de usuario responsables de obtener datos, debe considerar un paso adicional: dado que next-page-tester aislan los módulos entre el "cliente" y la representación del "servidor", esos simulacros que se crean en las pruebas (contexto del cliente) no se ejecutarán en el contexto del servidor (EG. Métodos de obtención de datos).
Para superar eso, necesitamos "contaminar" dichos módulos para (preservar/compartir) su identidad entre el contexto de "cliente" y "servidor" pasándolos a través de la opción 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
} Puede establecer cookies agregándolas a document.cookie antes de llamar getPage . next-page-tester propagará cookies a ctx.req.headers.cookie para que estén disponibles para los métodos de recuperación de datos. Esto también se aplica a las llamadas de métodos de recuperación posteriores activados por la navegación del lado del cliente.
test ( 'authenticated page' , async ( ) => {
document . cookie = 'SessionId=super=secret' ;
document . cookie = 'SomeOtherCookie=SomeOtherValue' ;
const { render } = await getPage ( {
route : '/authenticated' ,
} ) ;
render ( ) ;
} ) ; Nota: document.cookie no se limpia automáticamente. Tendrá que despejarlo manualmente después de cada prueba para mantener todo de forma aislada.
Next.js Link Component invoca window.scrollTo al hacer clic que no se implementa en el entorno JSDOM. Para corregir el error, debe configurar su entorno de prueba o proporcionar su propia window.scrollTo .
Esta advertencia significa que su página se presenta de manera diferente entre el servidor y el navegador. Este puede ser un comportamiento esperado o señalar un error en su código.
Esta advertencia significa que su aplicación durante el proceso de representación realiza algunas solicitudes de red que no se han burlado. Deberías encontrarlos y burlarse según sea necesario.
trailingSlash_errordebug para registrar la información de ejecución Gracias a estas maravillosas personas (Key Emoji):
Andrea Carraro ? | Matej Šnuderl ? | Jason Williams ? | arelaxend ? | kfazínico ? | Tomasz Rondio ? | Alexander Mendes |
Jan Sepke ? | Davidorchard ? | Doaa ismael ? | Andrew Hurle ? | massimeddu-sonic ? | Jess Telford ? | José ? |
Gergo tolnai ? | Brett ? | Vlad Elagin | Stockman de Daniel | Madeuz | Dr. Derek Austin ? | Feargal ? |
Jan R. Besi ? | Otávio Augusto Soares ? |
Este proyecto sigue la especificación de todos los contribuyentes. ¡Contribuciones de cualquier tipo bienvenido!
