所以,我做了一个 create-react-app,它已经有了
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'
如何解决这个问题,事实上我尝试安装打字稿仍然是同样的问题。
我的package.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"
}
}
谁能帮我解决这个问题...
所以,我在根级别
创建文件
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 __ 目录,并在其中创建了 fileMock.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
现在没有显示错误,它让我的测试用例通过了。