Jest 是一个 JavaScript 测试框架,它主要和 React Testing Library 一起用于单元测试和 Snapshot 测试。
在 Modern.js 中使用 Jest 需要先安装依赖,可以执行以下命令:
随后,你可以运行以下命令,这将自动在项目中初始化 Jets,并生成一个基础的 jest.config.[jt]s
配置:
本章节会使用 .ts
文件来完成 Jest 测试。
相比于其他的测试框架,Jest 在构建层面需要更多的配置,例如处理 JSX 和 ESM 语法,因此首先需要安装一些额外的依赖:
你需要进一步配置 jest.config.ts
文件,以便让 Jest 能够正确地编译和运行测试用例。下面是一个最基本的配置:
配置中,将 transformIgnorePatterns
设置为了空数组,意味着所有的文件都会经过编译,如果你希望提升测试运行的速度,可以按需配置。
setupFilesAfterEnv
会在启动时执行,在 jest.setup.ts
中,可以引入 @testing-library/jest-dom
。它包含了一组便捷的自定义匹配器,例如 .toBeInTheDocument()
,使编写测试变得更容易:
你需要配置 Babel 让 Jest 能够自动编译 JSX 等语法,下面是一个基本的配置:
现在,你可以开始编写测试用了,首先在 package.json
中添加一个 test
命令:
创建一个简单的页面用于测试:
添加测试用例,检测页面中是否有预期的文本:
上述用例中,我们从 @modern-js/runtime/router
引入了 <Router>
组件,这是因为 React Router 在渲染部分路由相关组件时,必须要有对应的上下文。
直接在 Modern.js 应用中运行时,<Router>
组件会自动注入。
执行上述 test
命令,运行测试用例: