React component is imported as an object in test environments - reactjs

Question

I am writing a React application using Vite and Typescript, with automated tests using Vitest. One of my components uses react-viewer, and looks something like this
import Viewer from "react-viewer";
import { useState } from "react";
type MyComponentProps = {
url: string
};
export const MyComponent = ({ url }: MyComponentProps) => {
const [isVisible, setVisible] = useState(false);
return (
<div>
/* Some other components above which toggle the viewer */
<Viewer
visible={isVisible}
onClose={() => setVisible(false)}
images={[{ src: url, alt: "", downloadUrl: url }]}
noNavbar
/>
</div>
);
};
This works when I run the application with the development server. However, in the automated tests, I get this error:
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
When I logged Viewer when running the tests, I got this
Object [Module] { default: [Function (anonymous)] }
But when I looked at the same log statement when running it in development, I got this
function default(A3)
It looks like in development mode, Viewer is imported as a React component (as I'd expect). But in the test environment, it's incorrectly imported as an object.
I found this issue on Vite's Github, which has a workaround. I tried following the same pattern, which works
import React from "react";
import Viewer from "react-viewer";
import ViewerProps from "react-viewer/lib/ViewerProps";
type PictureViewerComponent = (props: ViewerProps) => React.ReactPortal;
type ViewerComponent = PictureViewerComponent & {
default?: PictureViewerComponent;
};
export const PictureViewer: PictureViewerComponent =
(Viewer as ViewerComponent)?.default ?? Viewer;
But I'm a bit worried that I'll see this issues with other components that use default imports. It feels like there is an underlying issue with either my tsconfig.json or vite.config.ts.
Here is the tsconfig.json
{
"exclude": [
"node_modules",
"build",
"coverage",
"storybook-static",
"public"
],
"compilerOptions": {
"types": ["vite/client", "vitest/globals"],
"paths": {
"#acme/*": ["./src/*"]
},
"allowJs": true,
"baseUrl": ".",
"typeRoots": ["./node_modules/#types"],
"target": "ES6",
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "ES6",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noImplicitAny": true,
"noEmit": true,
"jsx": "react-jsx"
}
}
And here is the vite.config.ts
/// <reference types="vitest" />
import * as path from "path";
import react from "#vitejs/plugin-react";
import { defineConfig, splitVendorChunkPlugin } from "vite";
import eslint from "vite-plugin-eslint";
const config = () => {
return defineConfig({
base: "/acme/",
plugins: [react(), eslint(), splitVendorChunkPlugin()],
resolve: {
alias: [
{
find: /~(.+)/,
replacement: path.join(process.cwd(), "node_modules/$1")
},
{
find: /#acme\//,
replacement: path.join(process.cwd(), "./src") + "/"
},
{
// Workaround due to https://github.com/vitejs/vite/issues/9200
find: "path",
replacement: "path-browserify"
}
]
},
server: {
host: "0.0.0.0",
port: 80,
base: "/"
},
esbuild: {
loader: "tsx",
logOverride: { "this-is-undefined-in-esm": "silent" }
},
build: {
outDir: "build"
},
test: {
globals: true,
environment: "jsdom",
mockReset: true,
restoreMocks: true,
clearMocks: true,
setupFiles: "./src/setupTests.js",
coverage: {
reporter: ["text", "html"],
exclude: [
"node_modules/",
"src/setupTests.js",
"**/{__tests__,__stories__,test,storybook}/"
]
}
}
});
};
export default config;
I tried toggling the moduleResolution, esModuleInterop, and isolatedModules options in tsconfig.json, without success. I also tried setting test.deps.interopDefault to false in vite.config.ts, also without success.
I also tried importing the component like this, also without success
import { default as Viewer } from "react-viewer";
Any help would be appreciated! Thank you in advance