Error when testing React wrapped components with vitest #494
Description
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.