Calcite React tests fail in vitest

[mpayson]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

Calcite React tests fail in Vitest with the following error in Vite 0.33

SyntaxError: Named export 'Build' not found. The requested module '@stencil/core/internal/client/index.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@stencil/core/internal/client/index.js';
const { Build } = pkg;

In the latest Vitest (0.34.1), this can be worked around by in-lining Stencil so that the tests can run, but running Stencil in this environment leads to additional errors

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
TypeError: Invalid URL
 ❯ new NodeError node:internal/errors:405:5
 ❯ new URL node:internal/url:611:13
 ❯ Module.getAssetPath node_modules/@stencil/core/internal/client/index.js:39:22
     37| const createTime = (fnName, tagName = '') => {
     38|     if (BUILD.profile && performance.mark) {
     39|         const key = `st:${fnName}:${tagName}:${i++}`;
       |                      ^
     40|         // Start
     41|         performance.mark(key);
 ❯ getMessageBundle node_modules/@esri/calcite-components/dist/components/t9n.js:17:72
 ❯ fetchMessages node_modules/@esri/calcite-components/dist/components/t9n.js:52:10
 ❯ Module.setUpMessages node_modules/@esri/calcite-components/dist/components/t9n.js:42:37
 ❯ __vite_ssr_import_0__.proxyCustomElement.open.componentWillLoad node_modules/@esri/calcite-components/dist/components/calcite-notice.js:91:33
 ❯ safeCall node_modules/@stencil/core/internal/client/index.js:2025:36
 ❯ dispatchHooks node_modules/@stencil/core/internal/client/index.js:1790:23
 ❯ Array.dispatch node_modules/@stencil/core/internal/client/index.js:1772:28

TypeError: Cannot read properties of undefined (reading 'click')
    at __vite_ssr_import_0__.proxyCustomElement.disabled.clickHandler (/Users/maxp8108/devtopia/arcgis-data-pipelines/webapp/node_modules/@esri/calcite-components/dist/components/link.js:96:20)
    at __vite_ssr_import_0__.proxyCustomElement.disabled.<anonymous> (/Users/maxp8108/devtopia/arcgis-data-pipelines/webapp/node_modules/@stencil/core/internal/client/index.js:3013:46)
    at __vite_ssr_import_0__.proxyCustomElement.disabled.callTheUserObjectsOperation (/Users/maxp8108/devtopia/arcgis-data-pipelines/webapp/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
    at innerInvokeEventListeners (/Users/maxp8108/devtopia/arcgis-data-pipelines/webapp/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25)
    at invokeEventListeners (/Users/maxp8108/devtopia/arcgis-data-pipelines/webapp/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
    at HTMLElementImpl._dispatch (/Users/maxp8108/devtopia/arcgis-data-pipelines/webapp/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
    at fireAnEvent (/Users/maxp8108/devtopia/arcgis-data-pipelines/webapp/node_modules/jsdom/lib/jsdom/living/helpers/events.js:18:36)
    at HTMLElementImpl.click (/Users/maxp8108/devtopia/arcgis-data-pipelines/webapp/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:79:5)
    at __vite_ssr_import_0__.proxyCustomElement.disabled.click (/Users/maxp8108/devtopia/arcgis-data-pipelines/webapp/node_modules/jsdom/lib/jsdom/living/generated/HTMLElement.js:108:34)
    at /Users/maxp8108/devtopia/arcgis-data-pipelines/webapp/src/components/MessageList/tests/MessageList.test.tsx:82:12 undefined

Expected Behavior

Calcite React works with Vitest

Reproduction Sample

Vitest 0.33: https://github.com/mpayson/calcite-vitest-bug
Vitest 0.34.1: https://github.com/mpayson/calcite-vitest-bug/tree/latest-vite

Reproduction Steps

1. Clone the repo and install dependencies
2. Run tests npm run test

Reproduction Version

1.5.0

Relevant Info

This is likely a cause of #7185, and was not an issue before because the components were imported outside the tested files

Regression?

1.4.3

Priority impact

p1 - need for current milestone

Impact

Unable to update Calcite

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react

Esri team

ArcGIS Online

[benelan]

I hit this same SyntaxError: Named export 'Build' not found error when testing #7493 and was able to resolve it by transpiling CC, CCR, and Stencil:
https://github.com/benelan/calcite-samples/blob/ccr-navigator-error/ssr-frameworks/next/next.config.js

However, Vitetest uses jsdom which doesn't implent window.navigation, so even after transpiling you'd still run into the navigator issue the SSG/SSR people are hitting.

That's probably what the secondary TypeError: Invalid URL error is stemming from. There are some potential workarounds to that (in the context of Jest) in this jsdom issue: jsdom/jsdom#2112

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified with 1.6.0 in both the Vitest 0.33 and Vitest 0.34.1.