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