运行 jest 测试时，错误如下。
Demo
✕ should pass this demo test (3537ms)
● Demo › should pass this demo test
/Users/johnzhou/Desktop/common-components/node_modules/react-syntax-highlighter/dist/esm/languages/prism/jsx.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import jsx from "refractor/lang/jsx.js";
^^^
SyntaxError: Unexpected identifier
at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
at Object.<anonymous> (node_modules/@storybook/components/dist/syntaxhighlighter/syntaxhighlighter.js:54:35)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
当我想为 react-native-web 项目的故事书进行故事测试时会发生这种情况。该项目是打字稿项目。单元测试的案例很简单，
import initStoryshots from '@storybook/addon-storyshots'
describe('Demo', () => {
it('should pass this demo test', () => {
initStoryshots();
});
})
项目的 package.json 如下。
"private": true,
"name": "docs",
"version": "0.11.7",
"scripts": {
"build": "build-storybook --docs -o ./dist -c ./.storybook",
"start": "start-storybook --docs -p 9001 -c ./.storybook",
"tsc": "tsc",
"test": "jest --no-cache -u"
},
"dependencies": {
"@babel/core": "^7.0.0",
"@storybook/addon-docs": "^5.3.0-beta.31",
"@storybook/addon-options": "^5.3.0-beta.31",
"@storybook/addon-storyshots": "^5.3.7",
"@storybook/cli": "^5.3.0-beta.31",
"@storybook/react": "^5.3.0-beta.31",
"@storybook/theming": "^5.3.0-beta.31",
"@types/react": "^16.8.8",
"@types/react-native": "^0.57.39",
"core-js": "^3.6.4",
"lodash": "^4.17.15",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-native": "^0.61.2",
"react-native-elements": "^0.19.1",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "0.11.7",
"typescript": "^3.3.3"
},
"devDependencies": {
"babel-plugin-require-context-hook": "^1.0.0",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/preset-env": "^7.3.4",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-typescript": "^7.3.3",
"@babel/preset-react": "^7.8.3",
"@storybook/addon-actions": "^4.1.18",
"@storybook/addon-knobs": "^4.1.18",
"@storybook/addon-notes": "^4.1.10",
"@storybook/addon-options": "^4.1.18",
"@storybook/addon-viewport": "^4.1.18",
"@storybook/react": "^4.1.18",
"@types/jest": "^24.0.25",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.6",
"babel-plugin-react-native-web": "0.11.7",
"file-loader": "3.0.1",
"jest": "^24.9.0",
"jest-junit": "^8.0.0",
"jest-react-native": "^18.0.0",
"jsdom": "^15.1.1",
"metro-react-native-babel-preset": "0.51.1",
"react-addons-test-utils": "^15.6.2",
"react-dom": "^16.9.0",
"react-native-web": "^0.10.1",
"react-native-web-image-loader": "0.0.6",
"ts-jest": "^24.1.0",
"url-loader": "^2.2.0",
"webpack": "^4.41.2"
},
"jest": {
"preset": "react-native-web",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json"
],
"setupFiles": [
"<rootDir>/jest.setup.js"
],
"testEnvironment": "jsdom",
"testMatch": [
"<rootDir>/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testPathIgnorePatterns": [
"\\.snap$",
"<rootDir>/node_modules/"
],
"transform": {
"^.+\\.([j|t]sx?)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.(ts|tsx)?$": "ts-jest",
"^.+\\.mdx?$": "@storybook/addon-docs/jest-transform-mdx"
},
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!**/node_modules/**"
],
"coverageReporters": [
"text-summary",
"json-summary",
"lcov",
"html"
]
}
}
项目的 babelrc 如下。
"presets": ["@babel/preset-env","@babel/preset-typescript", "@babel/preset-react"],
"plugins":[
["@babel/proposal-class-properties", { "loose": true }],
"react-native-web"
],
"env": {
"test": {
"plugins": ["require-context-hook"]
}
}
}
这个问题困扰了我很久，谁能帮帮我。非常感谢！