Test failure with Vitest: require() of ES Module not supported

[ken-s-analog]

Description

Hello!

I have set up vite, vitest, and react-testing-library with react-echarts and while it works fine, any tests that have an Echart component fails with this error message:

FAIL  src/App.test.tsx [ src/App.test.tsx ]
Error: require() of ES Module /Users/name/Documents/projects/test-echarts/node_modules/echarts/core.js from /Users/name/Documents/projects/test-echarts/node_modules/@kbox-labs/react-echarts/dist/index.js not supported.
Instead change the require of core.js in /Users/name/Documents/projects/test-echarts/node_modules/@kbox-labs/react-echarts/dist/index.js to a dynamic import() which is available in all CommonJS modules.
 ❯ Object.<anonymous> node_modules/@kbox-labs/react-echarts/dist/index.js:40:19
     38| 
     39| // src/use-echarts.ts
     40| var import_core = require("echarts/core");
       |                   ^
     41| var import_react = require("react");
     42| 

I have also created a barebones repo that reproduces the error: https://github.com/ken-s-analog/react-echarts-failure-example

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-pc3p6k?file=src%2FApp.test.tsx

Steps to reproduce

1. Run npm create vite@latest my-app -- --template react-ts
2. Install and set up vitest, jsdom, echarts, @kbox-labs/react-echarts, @testing-library/jest-dom, @testing-library/react
3. Put an Echart component in App.tsx
4. Create a test, rendering the App component in RTL
5. Run the test. It fails
6. Remove the Echart component, and the tests pass

JS Framework

React (TS)

Version

1.4.0

Browser

VS Code

Operating System

• [X] macOS
• [ ] Windows
• [ ] Linux

Additional Information

No response

[hugocxl]

Hi @ken-s-analog. Sorry, I am pretty busy at the time. Have you looked into it?

[ken-s-analog]

I tried to look into it some but didn't make any meaningful progress. The workaround I'm using for now is to vi.mock the library during testing