next page tester下载 - next page tester源代码下载

next page tester

Ai源码

1.0.0

下载

下一页测试仪（已弃用）

该项目被弃用

Next.js参加了开发课程，该课程使该图书馆过时采用了测试方法。下一页测试器维护者建议使用浏览器测试。

简介

Next.js的缺少DOM集成测试工具

给定下一个库路由，此库将在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应用程序：

获取给定路线的数据
将服务器端渲染的结果渲染到JSDOM，为普通HTML（包括head元素）
将客户端应用程序安装到先前渲染的HTML

安装的应用程序是交互式的，可以使用任何DOM测试库进行测试（例如@testing-library/react ）。

next-page-tester将会照顾：

在预期的浏览器或服务器环境中加载和执行模块
解决方案提供了匹配页面组件的路线
如果情况，请致电Next.js数据获取方法（ getServerSideProps ， getInitialProps或getStaticProps ）
用自定义_app和_document组件包装页面
通过Link ， router.push ， router.replace模拟客户端导航
处理页面的redirect返回
支持next/router ， next/head ， next/link ， next/config和环境变量

API

GetPage

getPage接受选项对象并返回4个值：

 import { getPage } from 'next-page-tester' ;

const { render , serverRender , serverRenderToString , page } = await getPage ( {
  options ,
} ) ;

使成为（）

type ： () => { nextRoot: HTMLElement<NextRoot> }
返回： #__next next根元素。

除非您有高级用例，否则您应该主要使用此方法。在引擎盖下，它调用serverRender() ，然后将React应用程序安装/水合到JSDOM #__next root Element中。这是用户访问页面时会得到/看到的。

serverrender（）

type ： () => { nextRoot: HTMLElement<NextRoot> }
返回： #__next next根元素。

将服务器端的输出渲染到DOM中，但不会安装反应。使用它来测试下一步的方式。JS在以下情况下呈现：

在反应之前
当禁用JS时
SEO测试

ServerRenderToString（）

type ： () => { html: string }

将服务器端的输出渲染为HTML字符串。这是一种没有副作用的纯方法。

页

类型： React.ReactElement<AppElement>

应用程序的反应元素。

选项

财产	描述	类型	默认
路线（强制性）	下一个路线（必须以`/`开始）	`string`	-
req	增强默认模拟请求对象	`req => req`	-
res	增强默认模拟的响应对象	`res => res`	-
路由器	增强默认模拟的下一个路由器对象	`router => router`	-
useapp	渲染自定义应用程序组件	`boolean`	`true`
~~二手图~~（由于这个问题而导致的实验。暂时禁用）	渲染文档组件	`boolean`	`false`
Nextroot	绝对通往Next的路径。JS根文件夹	`string`	自动检测到
dotenvfile	`.env`文件保存环境变量的相对路径	`string`	-
包装纸	包装器文件的绝对路径。对于用模拟的提供商装饰组件树有用。	`string`	-
共享模型	应保留客户端和服务器上下文之间身份的模块列表。	`string[]`	[]

设置开发环境

处理特殊进口

如果您的页面/组件导入文件类型不是Node.js本地处理的（例如样式表，图像， .svg ，...），则应配置测试环境以正确处理它们。例如，如果开玩笑，您可能想配置一些moduleNameMapper 。

设置JSDOM环境

next-page-tester希望遇到JSDOM环境。如果使用开玩笑将这一行添加到您的jest配置：

 "testEnvironment" : "jsdom" ,

跳过自动清理和帮助者初始化

由于Next.js并非旨在在JSDOM环境中运行，因此我们需要设置默认的JSDOM ，以允许更平稳的测试体验。默认情况下， next-page-tester将：

提供window.scrollTo和IntersectionObserver模拟
每次测试后清理DOM
设置开玩笑以保持“服务器”和“客户端”执行之间的某些特定模块的身份

但是，您可以选择通过将NPT_SKIP_AUTO_SETUP ENV变量设置为true来跳过自动清理和帮助者的初始化。您可以像这样cross-env做：

 cross - env NPT_SKIP_AUTO_SETUP = true jest

可选：修补玩笑V26

如果使用Jest V26，则可能需要修补它，以便使用适当的服务器/客户端环境加载模块。维护工作将针对最新的开玩笑版本。

例子

在示例文件夹下，我们正在记录next-page-tester启用的测试案例。

Next.js版本支持

next-page-tester只着眼于仅支持Next.js和Jest的最后一个版本：

下一页 - 塔斯特	next.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。

请注意，我们不能保证支持Next.js的未来版本的支持。即使是补丁或次要版本也可能会破坏。在这种情况下，您必须等待发布新的next-page-tester版。

贡献非常欢迎，我们会尽力支持外部贡献者。

笔记

数据获取方法的上下文req和res对象是用节点莫克斯-HTTP模拟的
下一页测试器旨在与任何测试框架/库一起使用，但目前仅通过开玩笑和测试库进行测试。如果您有不同的设置遇到麻烦，请随时打开问题
由于此错误，在strict模式下使用TypeScript时，可能有必要安装@types/react-dom和@types/webpack

实验`useDocument`选项

useDocument选项是部分实现的，可能是不稳定的。

常问问题

如何在数据获取方法中模拟API调用？

模拟网络请求的第一种建议方法是与Mock service worker和Mirage JS等库在网络层进行模拟。

另一种可行的方法可能包括用诸如fetch-mock之类的库模拟全局fetch对象。

如果您想要一种更传统的方法，涉及嘲笑负责获取数据的用户陆地模块，则需要考虑一个额外的步骤：由于“客户端”和“服务器”渲染之间的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
}

我如何在Next.js数据获取方法中提供cookie？

您可以通过将cookie附加到document.cookie来设置getPage 。 next-page-tester将将cookie传播到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不会自动清理。每次测试后，您都必须手动清除它，以使所有内容保持孤立。

错误：未实现：window.scrollto

next.js Link组件调用window.scrollTo在单击时，该crollto在JSDOM环境中未实现。为了解决错误，您应该设置测试环境或提供自己的window.scrollTo 。

警告：文本内容不匹配。服务器：“ x”客户端：“ y”错误

此警告意味着您的页面在服务器和浏览器之间呈现不同。这可以是预期的行为，也可以是您代码中的错误。

错误：参考文献：未定义提取

此警告意味着您在渲染过程中的应用程序执行了一些尚未嘲笑的网络请求。您应该找到它们并根据需要进行模拟。

托多的

考虑重复使用Next.js代码零件（不仅类型）
考虑支持Next.js trailingSlash选项
渲染自定义_error页面
提供一个debug选项来记录执行信息

贡献者

谢谢这些好人（表情符号钥匙）：

_{安德里亚·卡拉罗（Andrea Carraro）} ？配x ？	_{Matejšnuderl} ？配x ？？	_{杰森·威廉姆斯} ？	_Arelaxend ？	_kfazinic ？	_{Tomasz Rondio} ？	_{亚历山大·门德斯（Alexander Mendes）}
_{Jan Sepke} ？	_Davidorchard ？	_{doaa ismael} ？	_{安德鲁·赫尔（Andrew Hurle）} ？	_{Massimeddu-Sonic} ？	_{杰西·特尔福德（Jess Telford）} ？	_约瑟夫？
_{Gergo Tolnai} ？	_布雷特？	_{弗拉德·伊拉金}	_{丹尼尔·斯托克曼（Daniel Stockman）}	_Madeuz	_{德里克·奥斯丁博士} ？	_feargal ？
_{Jan R. Biasi} ？	_{OtávioAugusto Soares} ？