Error when testing React wrapped components with vitest

[MarvDann]

Describe the bug

When testing a component that utilizes a react wrapped webview-ui-toolkit component with vitest, an error occurs because the version of the @microsoft/fast-react-wrapper package is not of type module.

To reproduce

Create a simple component inside a webview-ui folder that contains a React wrapped vscode ui toolkit button like in the suggested example https://github.com/microsoft/vscode-webview-ui-toolkit-samples/tree/main/frameworks/hello-world-react-vite
Install vitest, jsdom, @testing-library/jest-dom, @testing-library/react.

Write a simple test using vitest / testing library to test the existence of the button inside the component.

Extend expect from vitest with the matchers from @testing-library/js-dom/matchers in a setup.ts file

Configure vite config with the following test settings

test: { globals: true, environment: 'jsdom', setupFiles: './test/setup.ts', deps: { inline: ['@testing-library/react'] } },

Setup a test script in package.json to run vitest

Run the test script

Expected behavior

The test passes (providing you have written a valid test)

Current behavior

You get the following error.

SyntaxError: Named export 'provideReactWrapper' not found. The requested module '@microsoft/fast-react-wrapper' 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 '@microsoft/fast-react-wrapper';
const { provideReactWrapper } = pkg;

Screenshots

Desktop (please complete the following information):

• OS Version: Windows 10
• Toolkit Version: v1.2.2

Additional context

The problem happens because in the package.json file of the resolved version of @microsoft/fast-react-wrapper, there is no type: module setting. This has more recently been fixed and can be confirmed that it works by adding type: module to the package.json file in node_modules for the @microsoft/fast-react-wrapper package.

[hawkticehurst]

Thanks for the issue and even submitting a PR @MarvDann!

I'm about to head out on vacation starting next week, so I just wanted to chime in to say I have seen this issue and will circle back to it once I'm back (probably sometime in August or September). Hope you understand :)

[MarvDann]

Sure no problem. Getting approval from my company isn't an easy thing to do for the CLA but I found a workaround which was adding a "resolutions" property to my package.json to force the dependency versions.