@web/test-runner是我们为Snowpack项目推荐的测试运行器。请阅读我们在Snowpack测试指南中推荐@web/test-runner的更多信息。

设置

本指南展示了如何为一个React项目设置@web/test-runner和@snowpack/web-test-runner-plugin。最终的结果是在app-template-react中重现了测试配置，这是我们的Create Snowpack App启动模板之一。如果你使用的是不同的框架，请适当调整React的具体步骤。

1.安装依赖项

基础测试依赖（先别按回车键！）。

npm install --save-dev @web/test-runner @snowpack/web-test-runner-plugin chai

如果使用React、Vue、Svelte或Preact，添加相应的测试库（此处为@testing-library/react）。

如果使用TypeScript，添加@types/mocha和@types/chai。

2.2.配置

在你的项目根部创建一个新的web-test-runner.config.js文件。

process.env.NODE_ENV = 'test';

module.exports = {
  plugins: [require('@snowpack/web-test-runner-plugin')()],
};

⚠️不要在你的snowpack.config.mjs文件的插件中添加@snowpack/web-test-runner-plugin!它只需要在web-test-runner.config.js中出现。如果你需要指定测试选项，请使用testOptions。

3.脚本

在你的项目package.json中添加一个测试脚本。

"scripts": {
  "start": "snowpack dev",
  "build": "snowpack build",
+  "test": "web-test-runner \"src/**/*.test.jsx\"",
  ...
},

如果需要，将.jsx与包含你的测试的文件类型交换。

要指定多个测试文件类型，用大括号括起来，用逗号分开。例如，为了匹配.jsx、.js和.ts文件，脚本应该是。

"test": "web-test-runner \"src/**/*.test.{jsx,js,ts}\"",

💡 提示：wtr可以作为web-test-runner的简写。