Cannot find module '/@react-refresh' from 'src/App.tsx'

[polRk]

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

[polRk]

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",
};

[polRk]

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.

[polRk]

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"],
};

[polRk]

cssMock.js

module.exports = {
    process() {
        return 'module.exports = {};';
    },
    getCacheKey() {
        // The output is always the same.
        return 'cssTransform';
    },
};

[polRk]

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'

[polRk]

I think, vite can not pre cache necessary dependencies (react and react-dom can)

[polRk]

Pre-bundling dependencies:
  react
  react-dom
(this will be run only when your dependencies or config have changed)