Как запустить модульное тестирование в приложении Create React, которое импортирует файл tsx

Итак, я создал приложение create-react, и оно уже есть npm run test сейчас я импортирую одну библиотеку, import { createWeb3Modal } from '@web3modal/ethers/react' и эта реакция импортирована отсюда node_modules/@web3modal/ethers/dist/types/exports/react.tsx и мой App.jsx находится в формате jsx, а импортированные файлы этой реакции находятся в формате tsx, поэтому, когда я запускаю npm run test, это дает мне ошибку

FAIL  src/components/App/App.test.js
  ● Test suite failed to run

    Cannot find module '@web3modal/ethers/react' from 'src/components/App/App.jsx'

    Require stack:
      src/components/App/App.jsx
      src/components/App/App.test.js

    > 1 | import { createWeb3Modal } from '@web3modal/ethers/react'

как это решить, на самом деле я пытался установить машинописный текст, но проблема осталась та же.

мой пакет.json

   {
 "name": "abc",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
   "@sentry/cli": "^2.31.0",
   "@sentry/react": "^7.108.0",
   "@tanstack/react-query": "^5.28.2",
   "@testing-library/jest-dom": "^5.17.0",
   "@testing-library/react": "^13.4.0",
   "@testing-library/user-event": "^13.5.0",
   "@types/jest": "^29.5.12",
   "@types/node": "^20.12.7",
   "@types/react": "^18.3.1",
   "@types/react-dom": "^18.3.0",
   "@web3modal/ethers": "^4.0.13",
   "eslint-import-resolver-typescript": "^3.6.1",
   "eslint-plugin-prettier": "^5.1.3",
   "eth-connect": "^6.2.4",
   "react": "^18.2.0",
   "react-dom": "^18.2.0",
   "react-google-recaptcha-v3": "^1.10.1",
   "react-redux": "^9.1.0",
   "react-router-dom": "^6.22.3",
   "react-scripts": "5.0.1",
   "recoil": "^0.7.7",
   "redux": "^5.0.1",
   "typescript": "^5.4.5",
   "web-vitals": "^2.1.4"
 },
 "scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build && npm run sentry:sourcemaps",
   "test": "react-scripts test",
   "eject": "react-scripts eject",
   "postbuild": "rimraf ./build/**/*.map"
 },
 "eslintConfig": {
   "extends": [
     "react-app",
     "react-app/jest"
   ]
 },
 "browserslist": {
   "production": [
     ">0.2%",
     "not dead",
     "not op_mini all"
   ],
   "development": [
     "last 1 chrome version",
     "last 1 firefox version",
     "last 1 safari version"
   ]
 },
 "devDependencies": {
   "eslint": "^8.57.0",
   "eslint-config-prettier": "^9.1.0",
   "eslint-config-standard": "^17.1.0",
   "eslint-plugin-import": "^2.29.1",
   "eslint-plugin-jsx-a11y": "^6.8.0",
   "eslint-plugin-n": "^16.6.2",
   "eslint-plugin-promise": "^6.1.1",
   "eslint-plugin-react": "^7.34.1",
   "eslint-plugin-react-hooks": "^4.6.0",
   "sass": "^1.72.0"
 }
}

может ли кто-нибудь помочь мне решить эту проблему...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
149
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Итак, я создаю файл babel.config.js на корневом уровне.

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
}

тогда я создал jest.config.js

module.exports = {
  verbose: true,
  setupFilesAfterEnv: ['./src/helper/setupTests.js'],
  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
  moduleDirectories: ['node_modules', 'src'],
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/fileMock.js',
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
  },
  transform: {
    '^.+\\.(ts|tsx)?$': 'ts-jest',
    '^.+\\.(js|jsx)$': 'babel-jest',
  },
  transformIgnorePatterns: ['node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)'],
  globals: {
    'ts-jest': {
      isolatedModules: true,
    },
    TextEncoder: require('util').TextEncoder,
    TextDecoder: require('util').TextDecoder,
  },
  testEnvironment: 'jsdom',
}

и создал каталог __ макета __ и в нем создал файлMock.js и добавил

module.exports = 'test-file-stub'

и сделал много npm i -D

text-encoding
jest-environment-jsdom
jest
identity-obj-proxy
@babel/preset-react
@babel/preset-env
@babel/core
ts-jest
babel-jest

и изменил мой тестовый сценарий как

"test": "jest --runInBand --detectOpenHandles --forceExit",

и теперь не показывает никаких ошибок, и мои тестовые примеры пройдены.

Другие вопросы по теме