React bindings cause errors when unit testing application

[TomHancock2]

Stencil version:

 v1.8.11

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

We are trying to run unit tests in a React app that uses Stencil React bindings.

Example tests (using @testing-library/react):

it('renders component with default text', () => {
  const { getByText } = render(<MyComponentWrapper  />);
  getByText('Lorem ipsum dolor sit amet.');
});

it('renders component with label text', () => {
  const { getByText } = render(<MyComponentWrapper content="This is my content" />);
  getByText('This is my content');
});

Note: MyComponentWrapper wraps a Stencil react component so we are not testing the component directly

1. When running tests without JSDOM Sixteen we get the following error:

TypeError: Cannot read property 'get' of undefined
my-app:       1176 |         };
my-app:       1177 |         cmpMeta.$lazyBundleIds$ = lazyBundle[0];
my-app:     > 1178 |         if (!exclude.includes(tagName) && !customElements.get(tagName)) {
my-app:            |                                                           ^
my-app:       1179 |             cmpTags.push(tagName);
my-app:       1180 |             customElements.define(tagName, proxyComponent(HostElement));
my-app:       1181 |         }

2. When we introduce JSDOM Sixteen the above error is fixed but then we get the following error sporadically. Sometimes the tests will pass but other times they will fail. The tests seem to pass when ran individually but not when run together.

TypeError: style.replace is not a function
my-app:       273 |     if (supportsConstructibleStylesheets && allowCS) {
my-app:       274 |         style = (style || new CSSStyleSheet());
my-app:     > 275 |         style.replace(cssText);
my-app:           |               ^
my-app:       276 |     }
my-app:       277 |     else {
my-app:       278 |         style = cssText;
my-app:       at registerStyle (../components/dist/cjs/core-ea8b1249.js:275:15)
my-app:       at initializeComponent (../components/dist/cjs/core-ea8b1249.js:1020:

Expected behavior:

All tests pass.

Steps to reproduce:

I have created a repo that shows this issue.

https://github.com/TomHancock2/stenciljs-react-bindings

Master branch does not have JSDOM Sixteeen.

I have created a separate branch which has JSDOM Sixteen set as the environment - https://github.com/TomHancock2/stenciljs-react-bindings/tree/fix/jsdom-sixteen

• Clone branch
• yarn install
• yarn test (in root or in packages/my-app) - if you are on the JSDOM Sixteen branch please run multiple times to see it fail.

Related code:

Repo above has code examples

Other information:

[chiyema]

I got the same issue. From the answer, replace/replaceSync is only available in new chrome instance? No clue for now.

[chiyema]

construct-style-sheets-polyfill is the one to help support replace in all modern browsers. Load it by configure setupFiles: ['construct-style-sheets-polyfill'] in jest.config.js.

[TomHancock2]

Thanks @chiyema - I will give it a go and let you know how we get on.

[MBlanquett]

The overall problem for 2 is: Stencil does check for support of CSSStyleSheet via "supportsConstructibleStylesheets"-check, but does not consider there are browsers around that do support it without implementing the replace-method. I attached a PR for that.

[claviska]

Fixed in #2773. This will be available in the next Stencil release.

Thanks for the PR, @MBlanquett! 🙌

[TomHancock2]

Thanks all!