modernweb-dev
[test-runner-mocha] implement snapshot testing
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.
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? :-)
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.
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?
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.
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 :)
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 :/
Yes, this would be a great addition, snapshot testing when done properly keeps your tests really maintainable.
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.
@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();