vite-jest
vite-jest copied to clipboard
Cannot find module '/@react-refresh' from 'src/App.tsx'
App.tsx
import React, { useState } from 'react'
import logo from './logo.svg'
import './App.css'
function App() {
const [count, setCount] = useState(0)
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>Hello Vite + React!</p>
<p>
<button type="button" onClick={() => setCount((count) => count + 1)}>
count is: {count}
</button>
</p>
<p>
Edit <code>App.tsx</code> and save to test HMR updates.
</p>
<p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
{' | '}
<a
className="App-link"
href="https://vitejs.dev/guide/features.html"
target="_blank"
rel="noopener noreferrer"
>
Vite Docs
</a>
</p>
</header>
</div>
)
}
export default App
jest.config.js
module.exports = {
preset: "vite-jest",
setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
testMatch: [
"<rootDir>/src/**/*.test.{js,jsx,ts,tsx}",
],
testEnvironment: "jest-environment-jsdom",
};
If i removed all .css and .svg imports, i got another error:
FAIL src/App.test.tsx
✕ renders learn react link (96 ms)
● renders learn react link
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
My working copy
module.exports = {
preset: "vite-jest",
roots: [
"<rootDir>/src"
],
testMatch: [
"<rootDir>/src/**/*.test.{js,jsx,ts,tsx}",
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
],
"testEnvironment": "jsdom",
"transform": {
"^.+\\.css$": "<rootDir>/jest/mocks/cssMock.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
],
setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
};
cssMock.js
module.exports = {
process() {
return 'module.exports = {};';
},
getCacheKey() {
// The output is always the same.
return 'cssTransform';
},
};
Oh no, i got an error, similar
Cannot find module '/Users/polrk/Developer/fintorio/app/node_modules/.vite/@testing-library_react.js' from 'src/App.test.tsx'
I think, vite can not pre cache necessary dependencies (react and react-dom can)
Pre-bundling dependencies:
react
react-dom
(this will be run only when your dependencies or config have changed)