[SOLVED] Use Jest with @web/test-runner

Use Jest with @web/test-runner

I am trying to use @web/test-runner as my test runner on top of snowpack. So far I am successful with @web/test-runner-playwright to launch a headless browser to run my tests. Now I need a testing framework (i.e. jest) to utilize its test and expect constructs.

How can I use jest with the above setup?

I tried to directly import these from @jest/globals but I got an error saying Do not import '@jest/globals' outside of the Jest test environment, which is understood.

I do not want to use jest as my test runner because I want to leverage my snowpack pipeline with my tests as well as to run tests in actual headless browser. This is why I am using @web/test-runner.

How to integrate jest with @web/test-runner?

Solution

I was able to get it working with jest-browser-globals:

const { esbuildPlugin } = require('@web/dev-server-esbuild')

module.exports = {
  nodeResolve: true,
  files: ['src/**/*.spec.{ts,tsx}'],
  plugins: [
    esbuildPlugin({
      ts: true,
      tsx: true,
      jsxFactory: 'h',
      jsxFragment: 'Fragment',
    }),
  ],
  coverageConfig: {
    include: ['src/**/*.{ts,tsx}'],
  },
  testRunnerHtml: testFramework => `
    <html>
      <head>
        <script type="module" src="${testFramework}"></script>
        <script type="module">import 'jest-browser-globals';</script>
      </head>
    </html>
  `,
}

This config is using the esbuild plugin for bundling which works pretty fast and I recommend, but you could remove it.

The same tests run in jest (node+jsdom) and web-test-runner in the browser. Debugging and sourcemaps all work pretty well.