Setting up Vitest with Next.js
Vite 和 React Testing Library 经常一起用于单元测试。本指南将向你展示如何在 Next.js 中设置 Vitest 并编写你的第一个测试。
须知: 由于异步服务器组件是 React 生态系统中的新特性,Vitest 目前不支持它们。虽然你仍然可以为同步的服务器和客户端组件运行单元测试,但我们建议对异步组件使用端到端测试。
你可以使用 create-next-app
和 Next.js 的 with-vitest 示例来快速开始:
要手动设置 Vitest,请将 vitest
和以下包作为开发依赖项安装:
在项目根目录创建一个 vitest.config.ts|js
文件,并添加以下选项:
有关配置 Vitest 的更多信息,请参阅 Vitest 配置 文档。
然后,在你的 package.json
中添加一个 test
脚本:
当你运行 npm run test
时,Vitest 默认会监视你项目中的变化。
通过创建一个测试来检查 <Page />
组件是否成功渲染了一个标题,以确保一切正常工作:
然后,运行以下命令来执行你的测试:
你可能会发现这些资源很有帮助: