Issues using React components in test environment

We’ve recently replaced our hand-rolled components with the ones provided by our toolkit. All works well when running the extension normally, but we get the following exception when running our tests:

/Users/dee/Programming/work/nordic/vscode-nrf-connect/node_modules/@vscode/webview-ui-toolkit/react/index.js:3
import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
^^^^^^

SyntaxError: Cannot use import statement outside a module

This is being hit when our test imports the React component that makes use of the toolkit components. For context, our source code and tests are compiled using tsc -p ., and are run through the runTests utility provided by @vscode/test-electron. This means there’s no bundling stage involved, which I guess is why we’re not seeing this when the extension is running normally.

Is it possible that there’s something misconfigured in the library, i.e. a missing "type": "module" in the package.json file?

[deerob4]

Hey, thanks for looking into this!

Our extension isn’t open source unfortunately, but I created a minimal example that reproduces the issue. It implements a simple counter webview that uses the VSCodeButton component, as well as a couple of tests, and includes a rough approximation of our test environment. I hope it’s useful!

[hawkticehurst]

Thanks for the bug report @deerob4!

Been a bit busy with other pressing work lately but will put it on the top of my todo list once I have some free cycles

Also thank you so much for the call out of a missing "type": "module"! I thought that was something I included long ago, but adding it might be a solution to some other problems I’ve been tackling with the toolkit