feat: add option to test native shadow DOM

jest.config.js

@@ -4,14 +4,50 @@
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-module.exports = {
-    projects: [
-        {
-            displayName: 'unit',
-            rootDir: '<rootDir>/packages',
+function unitTest({ nativeShadow }) {
+    return {
+        displayName: {
+            name: `unit (${nativeShadow ? 'native' : 'synthetic'} shadow)`,
+            color: nativeShadow ? 'blue' : 'cyan'
+        },
+
+        rootDir: '<rootDir>/packages',
+        testMatch: ['**/__tests__/**/?(*.)(test).js'],
 
-            testMatch: ['**/__tests__/**/?(*.)(test).js'],
+        globals: {
+            'lwc-jest': {
+                nativeShadow
+            }
         },
-        '<rootDir>/test',
+    };
+}
+
+function integration({ nativeShadow }) {
+    return {
+        displayName: {
+            name: `integration (${nativeShadow ? 'native' : 'synthetic'} shadow)`,
+            color: nativeShadow ? 'blue' : 'cyan'
+        },
+
+        rootDir: '<rootDir>/test',
+        preset: '@lwc/jest-preset',
+        moduleNameMapper: {
+            '^smoke/(.+)$': '<rootDir>/src/modules/smoke/$1/$1',
+        },
+
+        globals: {
+            'lwc-jest': {
+                nativeShadow
+            }
+        },
+    };
+}
+
+module.exports = {
+    projects: [
+        unitTest({ nativeShadow: false }),
+        unitTest({ nativeShadow: true }),
+        integration({ nativeShadow: false }),
+        integration({ nativeShadow: true })
     ],
 };

package.json

@@ -9,7 +9,6 @@
         "format": "prettier --write '{packages,test}/**/*.{js,ts,json,md}'",
         "release:publish:ci": "./scripts/release/publish.js",
         "release:version": "./scripts/release/version.js"
-
     },
     "workspaces": [
         "packages/@lwc/*",

packages/@lwc/jest-preset/README.md

@@ -4,32 +4,52 @@ Tools to assist with testing Lightning Web Components (LWC) with Jest. This proj
 
 ## Usage
 
-### Jest Preset Configuration
+### Installation
 
-1. Install `@lwc/synthetic-shadow`. This is a polyfill for ShadowRoot that was tailor-made for LWC.
+```shell
+yarn add --dev @lwc/jest-preset @lwc/compiler @lwc/engine-dom @lwc/synthetic-shadow
+```
 
-    `yarn add --dev @lwc/synthetic-shadow`
+### Configuration
 
-2. Use this project's preset config. This maps to the settings in `jest-preset.json`. Any settings added to your project's own `jest` config will take precedence to entries in the preset.
+Add the preset to your `jest.config.js` like so:
 
-    ```json
-    {
-        "jest": {
-            "preset": "@lwc/jest-preset"
-        }
-    }
-    ```
+ ```json
+ {
+     "jest": {
+         "preset": "@lwc/jest-preset"
+     }
+ }
+ ```
+
+Then, update the `moduleNameMapper` entry in `jest.config.js` to point to where your LWC components live. For example, use the following to map all components in the `example` and `other` namespaces:
+
+ ```json
+ {
+     "moduleNameMapper": {
+         "^(example|other)/(.+)$": "<rootDir>/src/test/modules/$1/$2/$2"
+     }
+ }
+ ```
+
+#### nativeShadow
 
-3. Update the `moduleNameMapper` entry in your Jest config to point to where your LWC components live. For example, use the following to map all components in the `example` and `other` namespaces:
+By default, this preset is configured to run the tests with synthetic shadow DOM. Optionally, you can configure `@lwc/jest-preset` to use native shadow DOM rather than synthetic shadow DOM. To do so, add the following to `jest.config.js`:
 
-    ```json
-    {
-        "moduleNameMapper": {
-            "^(example|other)/(.+)$": "<rootDir>/src/test/modules/$1/$2/$2"
+```json
+{
+    "globals": {
+        "lwc-jest": {
+            "nativeShadow": true
         }
-    }
-    ```
+    },
+}
+```
+
+### Testing
+
+Create a `__tests__` inside the bundle of the LWC component under test.
+
+Then, create a new test file in `__tests__` that follows the naming convention `<js-file-under-test>.test.js`. See an example in this projects `src/test` directory.
 
-4. Create a `__tests__` inside the bundle of the LWC component under test.
-5. Create a new test file in `__tests__` that follows the naming convention `<js-file-under-test>.test.js`. See an example in this projects `src/test` directory.
-6. Write and run the Jest tests!
+Now you can write and run the Jest tests!

packages/@lwc/jest-preset/src/setup.js

@@ -1,4 +1,9 @@
-require('@lwc/synthetic-shadow/dist/synthetic-shadow.js');
+const config = global['lwc-jest'] || {}
+const { nativeShadow } = config
+
+if (!nativeShadow) {
+    require('@lwc/synthetic-shadow/dist/synthetic-shadow.js');
+}
 
 // Provides temporary backward compatibility for wire-protocol reform: lwc > 1.5.0
 global.wireAdaptersRegistryHack = new Map();

test/src/modules/smoke/shadow/__tests__/shadow.spec.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+
+describe('shadow DOM', () => {
+    // Smoke test to check that we're running in the right shadow DOM mode
+    if (global['lwc-jest'].nativeShadow) {
+        it('should be using native shadow DOM', () => {
+            // sniff for JSOM's ShadowRoot implementation
+            expect(ShadowRoot.prototype.constructor.toString()).not.toContain('function SyntheticShadowRoot');
+        });
+    } else { // synthetic shadow
+        it('should be using synthetic shadow DOM', () => {
+            // sniff for @lwc/synthetic shadow
+            expect(ShadowRoot.prototype.constructor.toString()).toContain('function SyntheticShadowRoot');
+        });
+    }
+})