@web/test-runner is our recommended test runner for Snowpack projects. Read more about why we recommend @web/test-runner in our Snowpack Testing Guide.

Setup

This guide shows how to set up @web/test-runner and @snowpack/web-test-runner-plugin for a React project. The end result recreates the test configuration in app-template-react, one of our Create Snowpack App starter templates. If you’re using a different framework, tweak React specific steps appropriately.

1. Install dependencies

The base testing dependencies (don’t hit Enter just yet!):

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

If using React, Vue, Svelte, or Preact, add the corresponding Testing Library (in this case @testing-library/react).

If using TypeScript, add @types/mocha and @types/chai.

2. Configure

Create a new web-test-runner.config.js file in your project root:

process.env.NODE_ENV = 'test';

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

⚠️ Don’t add @snowpack/web-test-runner-plugin to plugins in your snowpack.config.mjs file! It only needs to be in web-test-runner.config.js. If you need to specify test options, use testOptions.

3. Script

Add a test script to your project package.json:

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

If needed, swap .jsx with the file type(s) containing your tests.

To specify multiple test file types, enclose with curly brackets and separate with commas. For example, to match .jsx, .js, and .ts files, the script would be:

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

💡 Tip: wtr can be used as a shorthand for web-test-runner.