Use Jest with @web/test-runner

[geekox86]

Greetings all,

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?

[LarsDenBakker]

This really depends on which aspect of jest you want to use. Jest is both a test framework, a test runner and an assertion library. I'm not sure how and if you can use individual parts, but Jest is fundamentally made to run inside node js so that is likely to give some issues.

Your tests in the browser need to communicate with the test runner. We currently have an implementation only for Mocha, but you could implement your own. This is documented here: https://modern-web.dev/docs/test-runner/test-frameworks/write-your-own/

By default web test runner uses mocha, and you can use @esm-bundle/chai for assertions.

[geekox86]

Hi @LarsDenBakker. Thank you for passing by.
I need jest as a framework and assertion library, but not as a test runner. I will look into the documentation and the mocha example.

[digital-h]

By default web test runner uses mocha, and you can use @esm-bundle/chai for assertions.

Very interesting.
How does @esm-bundle/chai work together with @open-wc/testing? Both of the libraries provide expect - so what would you recommend as an import?

import { expect } from '@open-wc/testing'; or
import { expect } from 'chai'; (with yarn add chai@npm:@esm-bundle/chai)

[LarsDenBakker]

@digital-h open-wc/testing uses chai underneath, with some plugins installed. So both work fine!