vite-jest icon indicating copy to clipboard operation
vite-jest copied to clipboard

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

Open polRk opened this issue 3 years ago • 7 comments

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 avatar Jul 21 '21 10:07 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 avatar Jul 21 '21 10:07 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 avatar Jul 21 '21 10:07 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 avatar Jul 21 '21 11:07 polRk

cssMock.js

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

polRk avatar Jul 21 '21 11:07 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 avatar Jul 21 '21 11:07 polRk

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

polRk avatar Jul 21 '21 11:07 polRk

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

polRk avatar Jul 21 '21 11:07 polRk