jestjsplaywrightheadlessweb-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.