feat: add option to test native shadow DOM

[nolanlawson]

Adds a way to test native shadow DOM in @lwc/jest-preset. (I guess it's "native" because it's implemented by Jest/JSDOM. 🙂 ). Fixes #93.

Options file

To add this option, I had to add a config file, lwc-jest.config.js. It can contain:

module.exports = {
  nativeShadow: true
}

Why lwc-jest.config.js? Well, I looked at a few Jest presets mentioned on the Jest website. Here's what they're doing:

• jest-mongodb: jest-mongodb-config.js
• jest-dynamodb: jest-dynamodb-config.js
• jest-puppeteer: jest-puppeteer.config.js

I think lwc-jest.config.js looks better than lwc-jest-config.js (especially next to jest.config.js), so I went with jest-puppeteer's format. 🙂

Testing

In our tests, I'd like to confirm that we're actually reading the config file and running in the right shadow mode. The most straightforward way I found is to run the full test suite in both synthetic and shadow mode using process.env.NATIVE_SHADOW to switch.

This has the benefit of ensuring our tests don't break in either mode. I can also confirm that both modes are working correctly by sniffing ShadowRoot.prototype.constructor.toString().

Gus WI

W-9318249

[pmdartus]

I am a little concerned with creating yet another configuration file for LWC. We already have today the lwc.config.json configuration.

Here are a couple of other alternatives worth considering IMO:

• Using jest global options to configure the preset. This approach is similar to ts-jest.
• Exposing multiple presets. Today the preset is exposed via @lwc/jest-preset, we can for example also expose @lwc/jest-preset/synthetic-shadow and @lwc/jest-preset/native-shadow.

[nolanlawson]

I'm happy to go with the ts-jest approach. It's definitely less machinery to maintain (e.g. do we maintain lwc-jest.config.cjs for CommonJS in an ESM project? 😛 ). The multi-package solution seems a bit less clean to me, especially given we may add other options later.

[nolanlawson]

OK, switched to using Jest globals.