[test-runner-mocha] implement snapshot testing

[bennypowers]

chai-dom-diff offers snapshot testing via

expect(element).shadowDom.to.equalSnapshot()

This fails in web test runner. Proximal cause is that window.__mocha_context__ is undefined. (this is probably a karma API?)

@LarsDenBakker recommended implementing snapshots directly with mocha, without reference to karma's globals.

[bmeurer]

I was about to file a bug with pointing to a repro at https://github.com/bmeurer/wtr-snapshot-issue when I stumbled upon this feature request. Any progress on this? Or any guidance how to implement this? :-)

[LarsDenBakker]

It's on the todolist, but I haven't gotten to it yet. What we need to do here is add a readFile / writeFile command to the commands package: https://github.com/modernweb-dev/web/tree/master/packages/test-runner-commands (See https://modern-web.dev/docs/test-runner/commands/#custom-commands how to write commands).

After that we need to use these two commands from the semantic dom diff package. Probably as a separate chai plugin specific for WTR.

[bmeurer]

What are the chances that you'll get to this in the near future? I'm not opposed to giving this a try, but I'm afraid my spare time is fairly limited right now, and I lack a lot of domain knowledge here.

The readFile / writeFile commands don't sound all that complicated; the difficult part seems to be the communication back to the browser as far as I can tell. I suppose that should be done by injecting the data as script via CDP?

[LarsDenBakker]

The commands package takes care of that already, there is a websocket connection that waits for a ping back and resolves the promise in the browser. The docs should explain that.

I'll to this eventually, maybe this month or the next.

[bmeurer]

Awesome, thanks. Very much appreciated.

[MaximePlancke]

Hi everyone,

Do you have any update on when the snapshot would be available with web test runner? I am having some issues with karma and @open-wc/testing (I have some commonJS packages and the preprocessors I tried to convert to esm does not seem to work with @open-wc/testing-karma).

My best bet was web test runner as it makes it very easy to convert CommonJS module with rollup but unfortunately my snapshot tests are not working.

Thank you :)

[pruik]

Any update on this? Or is there a known work-around?

This is currently a blocking issue for our components library, since they are too bulky to test without snapshots :/

[mindreframer]

Yes, this would be a great addition, snapshot testing when done properly keeps your tests really maintainable.

[LarsDenBakker]

I added a snapshot plugin to the commands package: https://github.com/modernweb-dev/web/pull/1501

Working on using it inside the chai plugin for DOM snapshots next.

[LarsDenBakker]

@open-wc/semantic-dom-diff now also supports snapshot testing with WTR. Currently open-wc is in "prerelease" mode until the next version of lit is finalized. For now you can get the latest using the next tag for the testing package:

"@open-wc/testing": "next"

Note that snapshot testing is now async, so you need to await the assertion:

await expect(element).shadowDom.toEqualSnapshot();

[bennypowers]

is this still relevant?