我突然发现这个错误。
代码在我使用时工作正常,但在使用 Jest 进行测试时会弹出此问题。 ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ......
详情:
C:\node_modules\react-leaflet\lib\index.js
:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { us
eMap, useMapEvent, useMapEvents } from './hooks.js';
^^^^^^
SyntaxError: Unexpected token 'export'
9 | } from 'react-leaflet';
10 | import { private } from 'private';
> 11 |
| ^
这是我的笑话配置
module.exports = {
moduleNameMapper: {
// Resolve .css and similar files to identity-obj-proxy instead.
'.+\\.(css|styl|less|sass|scss)$': 'identity-obj-proxy',
// Resolve .jpg and similar files to __mocks__/file-mock.js
'.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
'<rootDir>/__mocks__/file-mock.js',
},
clearMocks: true,
coverageDirectory: 'coverage',
// In jest.config.js add (if you haven't already)
setupFilesAfterEnv: ['./src/setupTests.js'],
coverageProvider: 'v8',
globals: {
'ts-jest': {
isolatedModules: true,
},
},
rootDir: '.',
moduleDirectories: ['node_modules', 'src', 'utils'],
testEnvironment: 'jsdom',
testTimeout: 20000,
roots: ['<rootDir>/src'],
testMatch: [
'**/__tests__/**/*.+(ts|tsx|js)',
'**/?(*.)+(spec|test).+(ts|tsx|js)',
],
transform: {
'^.+\\.js?$': 'babel-jest',
'^.+\\.(t|j)sx?$': ['@swc/jest'],
},
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
transformIgnorePatterns: [`/node_modules/(?!${esModules}')`],
};
TsConfig
"include": [
"src/**/*.ts",
"src/**/*.tsx",
],
"exclude": [
"node_modules",
"dist"
],
"compilerOptions": {
"target": "es2015",
"module": "esnext",
"declaration": true,
"lib": [
"es2021",
"es2017",
"es2015",
"dom",
"ESNext"
],
"allowJs": false,
"jsx": "react-jsx",
"sourceMap": true,
"outDir": "dist",
"rootDir": "src",
"removeComments": true,
"strict": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"isolatedModules": true,
"noEmit": true,
"baseUrl": "src",
"paths": {
"test-utils": [
"./utils/test-utils"
]
}
}
}
.Bablerc 和配置
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
module.exports = {
presets: [
[
'@parcel/babel-preset-env',
{
targets: {
esmodules: true,
},
},
],
],
};
是否有什么原因可能导致此问题,或者我是否遗漏了其他内容?
解决方案最终是
const esModules = ['@react-leaflet', 'react-leaflet'].join('|');
在 jest.config.js 之上
并在配置中
transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
这对我不起作用:
transformIgnorePatterns:[
],/node_modules/(?!${esModules})
我使用jest配置模块NameMapper解决了它:
jest.config.js
{
moduleNameMapper: {
"react-leaflet": "<rootDir>/src/__test__/mocks/reactLeafletMock.jsx"
}
}
/src/test/mocks/reactLeafletMock.jsx
const MapContainer = ({ children }) => <div data-testId="MapContainer">{children}</div>;
const useMap = () => ({ fitBounds: () => {} });
const TileLayer = () => <div data-testId="TileLayer" />;
const Marker = ({ children }) => <div data-testId="Marker">{children}</div>;
const Popup = () => <div data-testId="Popup" />;
export { MapContainer, TileLayer, Marker, Popup, useMap };