Cannot find module '../node_modules/.vite/@testing-library_react.js' from 'src/__tests__/unit/App.test.tsx'

[leeyh20]

I am running a very basic test copied from the React + Typescript example.

import React from "react";

import { render, screen } from "@testing-library/react";
import App from "../../App";

test("renders learn react link", () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

Sadly, it throws me an error

Test suite failed to run

    Cannot find module '.../node_modules/.vite/@testing-library_react.js' from 'src/__tests__/unit/App.test.tsx'

      at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:318:11)

I checked my .vite folder, I do have testing library react js installed

This is my package.json

I have tried placing it under dependencies and also devDependencies, but nothing seems to work.

Any ideas?

My full package.json. I really want to use vite-jest ! But if this doesn't work, I would have to go back to my hackish babel method of running jest with vite.

"scripts": {
    "dev": "vite --host",
    "build": "./build.sh",
    "serve": "vite preview",
    "lint": "eslint src",
    "test:unit": "vite-jest"
  },
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },
  "devDependencies": {
    "@types/jest": "^27.0.1",
    "@types/node": "^16.9.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@typescript-eslint/eslint-plugin": "^4.31.0",
    "@vitejs/plugin-react-refresh": "^1.3.1",
    "autoprefixer": "^10.3.4",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.25.1",
    "jest": "^27.1.1",
    "jest-environment-jsdom": "^27.1.1",
    "postcss": "^8.3.6",
    "tailwindcss": "^2.2.13",
    "typescript": "^4.3.2",
    "vite": "^2.5.4",
    "vite-jest": "^0.0.3"
  }

[leeyh20]

It is not a Windows issue, I'm running this on Linux, Ubuntu 18.04.

[kavsingh]

similar issue with @testing-library/dom on macOs 11.5.2, node 16.9.1

❯ yarn test
yarn run v1.22.11
$ vite-jest
(node:56260) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
 FAIL  src/app.test.ts
  ● Test suite failed to run

    Cannot find module '/Users/kav/Dev/playground/tsblank/node_modules/.vite/@testing-library_dom.js' from 'src/app.test.ts'

      at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:318:11)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.482 s
Ran all test suites.
/Users/kav/Dev/playground/tsblank/node_modules/execa/lib/error.js:60
                error = new Error(message);
                        ^

Error: Command failed with exit code 1: node --experimental-vm-modules /Users/kav/Dev/playground/tsblank/node_modules/jest/bin/jest.js
    at makeError (/Users/kav/Dev/playground/tsblank/node_modules/execa/lib/error.js:60:11)
    at Function.module.exports.sync (/Users/kav/Dev/playground/tsblank/node_modules/execa/index.js:194:17)
    at file:///Users/kav/Dev/playground/tsblank/node_modules/vite-jest/bin/vite-jest.js:11:7
    at ModuleJob.run (node:internal/modules/esm/module_job:183:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
    at async Object.loadESM (node:internal/process/esm_loader:68:5)
    at async handleMainPromise (node:internal/modules/run_main:63:12) {
  shortMessage: 'Command failed with exit code 1: node --experimental-vm-modules /Users/kav/Dev/playground/tsblank/node_modules/jest/bin/jest.js',
  command: 'node --experimental-vm-modules /Users/kav/Dev/playground/tsblank/node_modules/jest/bin/jest.js',
  escapedCommand: 'node --experimental-vm-modules "/Users/kav/Dev/playground/tsblank/node_modules/jest/bin/jest.js"',
  exitCode: 1,
  signal: undefined,
  signalDescription: undefined,
  stdout: undefined,
  stderr: undefined,
  failed: true,
  timedOut: false,
  isCanceled: false,
  killed: false
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

vite config:

import { defineConfig } from 'vite';
import legacyPlugin from '@vitejs/plugin-legacy';

export default defineConfig({
  build: { sourcemap: true },
  plugins: [legacyPlugin()],
  resolve: { alias: [{ find: '~', replacement: './src' }] },
});

jest config:

module.exports = {
  preset: 'vite-jest',
  moduleNameMapper: { '^~/(.*)': '<rootDir>/src/$1' },
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup-after-env.ts'],
};

jest.setup-files-after-env.ts

import '@testing-library/jest-dom';

package.json:

{
  "name": "tsblank",
  "version": "0.0.0",
  "repository": {
    "type": "git",
    "url": "git@github.com:kavsingh/tsblank.git"
  },
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "test": "vite-jest",
    "lint": "tsc && eslint .",
    "dev": "vite",
    "prebuild": "rm -rf ./dist",
    "build": "vite build",
    "serve": "vite preview"
  },
  "devDependencies": {
    "@testing-library/dom": "8.5.0",
    "@testing-library/jest-dom": "5.14.1",
    "@types/jest": "27.0.1",
    "@typescript-eslint/eslint-plugin": "4.31.0",
    "@typescript-eslint/parser": "4.31.0",
    "@vitejs/plugin-legacy": "1.5.3",
    "eslint": "7.32.0",
    "eslint-config-prettier": "8.3.0",
    "eslint-import-resolver-custom-alias": "1.2.0",
    "eslint-plugin-filenames": "1.3.2",
    "eslint-plugin-import": "2.24.2",
    "eslint-plugin-jest": "24.4.0",
    "eslint-plugin-jest-dom": "3.9.2",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-testing-library": "4.12.2",
    "jest": "27.1.1",
    "prettier": "2.4.0",
    "ts-node": "10.2.1",
    "typescript": "4.4.3",
    "vite": "2.5.6",
    "vite-jest": "0.0.3"
  }
}

[exiadbq]

This helped me to resolve the issue.

// jest.config.js
moduleNameMapper: {
    '^@src/(.*)$': '<rootDir>/src/$1',
    '\\.(css|sass|scss)$': 'identity-obj-proxy',
  },

[leeyh20]

Oh that is nice, what does the $1 do?

[exiadbq]

Basically, map (.*) to $1 as regular exp. https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring It's an odd one does alias for jest, did it work for you?

[leeyh20]

I did what you suggested, but I have another error now

Jest failed to parse a file. Details: SyntaxError: /home/.../src/tests/unit/App.test.tsx: Support for the experimental syntax 'jsx' isn't currently enabled (8:12):

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation. If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

Can't seem to solve this error now...

[ranger-ross]

im having the same issue, was there ever a resolution to this issue?