reactjs - 如何从 jest.setup.js 中的配置修复酶上的“语法错误:意外标识符”
问题描述
我正在尝试使用 Jest 和 Enzyme 在 Typescript 中进行测试,但测试会引发 SyntaxError:
FAIL src/_components/Button/__tests__/Button.spec.tsx
● Test suite failed to run
/Users/mikaelboutin/Desktop/self/gatsby-react-intl-starter/jest.setup.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Enzyme, { mount, render, shallow } from 'enzyme'
^^^^^^
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)
我试图包括ts-jest
. 它不会解决问题。我jest.config.js
用很多文章的一些建议改变了很多次。我设置了一个 jest.preprocess.js` 来将 babel 预设传递给它。
我关注了https://github.com/facebook/jest/issues/6229但在我的项目中什么也没做。
我的仓库在这里:https ://github.com/DWboutin/gatsby-intl-redux-typescript
jest.config.js
module.exports = {
preset: 'ts-jest',
transform: {
'^.+\\.(ts|tsx)?$': `<rootDir>/jest-preprocess.js`
},
moduleNameMapper: {
'.+\\.(css|styl|less|sass|scss)$': `identity-obj-proxy`,
'.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': `<rootDir>/__mocks__/file-mock.js`
},
testPathIgnorePatterns: [`node_modules`, `.cache`, `dist`],
transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
globals: {
__PATH_PREFIX__: ``
},
testURL: `http://localhost`,
setupFiles: [`<rootDir>/jest.setup.js`, `<rootDir>/loadershim.js`],
snapshotSerializers: ['enzyme-to-json/serializer']
}
jest.setup.js
import Enzyme, { mount, render, shallow } from 'enzyme'
import * as Adapter from 'enzyme-adapter-react-16'
// React 16 Enzyme adapter
Enzyme.configure({ adapter: new Adapter() })
// Make Enzyme functions available in all test files without importing
global.shallow = shallow
global.render = render
global.mount = mount
jest.preprocess.js
const babelOptions = {
presets: [
[
'@babel/preset-typescript',
{
isTSX: true,
allExtensions: true
}
],
'babel-preset-gatsby'
]
}
module.exports = require('babel-jest').createTransformer(babelOptions)
loadershim.js
global.___loader = {
enqueue: jest.fn(),
}
.babelrc
{
"presets": [
[
"@babel/preset-typescript",
{
"isTSX": true,
"allExtensions": true
}
],
"babel-preset-gatsby"
]
}
src/_components/Button/测试/Button.spec.tsx (我现在唯一的测试)
import { shallow } from 'enzyme'
import React from 'react'
import Button from '../'
describe('Button', () => {
describe('Primary', () => {
it('should match snapshot', () => {
const wrapper = shallow(<Button>Test</Button>)
expect(wrapper).toMatchSnapshot()
})
})
})
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "esnext",
"jsx": "preserve",
"lib": ["dom", "es2015", "es2017"],
"strict": true,
"noEmit": true,
"isolatedModules": true,
"esModuleInterop": true,
"skipLibCheck": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"removeComments": false,
"preserveConstEnums": true
},
"include": ["./src/**/*"],
"exclude": ["node_modules", "public", ".cache"]
}
包.json
{
"name": "gatsby-starter-default",
"description": "Gatsby default starter",
"version": "1.0.0",
"author": "Mikael Boutin <mikaelboutin.dw@gmail.com>",
"dependencies": {
"@reach/router": "^1.2.1",
"@types/styled-components": "^4.1.19",
"classnames": "^2.2.6",
"gatsby": "^2.15.18",
"gatsby-image": "^2.2.19",
"gatsby-plugin-manifest": "^2.2.17",
"gatsby-plugin-offline": "^3.0.7",
"gatsby-plugin-react-helmet": "^3.1.7",
"gatsby-plugin-sharp": "^2.2.24",
"gatsby-plugin-typescript": "^2.1.8",
"gatsby-source-filesystem": "^2.1.24",
"gatsby-transformer-sharp": "^2.2.15",
"omit.js": "^1.0.2",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-helmet": "^5.2.1",
"react-intl": "^3.2.4",
"react-redux": "^7.1.1",
"redux": "^4.0.4",
"styled-components": "^4.4.0",
"typescript": "^3.6.3"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"start": "npm run develop",
"format": "npm run format:src && npm run format:root",
"format:src": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
"format:root": "prettier --write \"./*.js\"",
"transpile": "npm run build && babel src/_components/ --extensions \".ts,.tsx\" --ignore \"**/__tests__/**\" -d dist",
"clean": "rm -rf .cache public dist",
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage",
"test:update": "jest --updateSnapshot"
},
"devDependencies": {
"@babel/cli": "^7.6.0",
"@babel/preset-typescript": "^7.6.0",
"@types/enzyme": "^3.10.3",
"@types/enzyme-adapter-react-16": "^1.0.5",
"@types/jest": "^24.0.18",
"@types/mocha": "^5.2.7",
"@types/node": "^12.7.5",
"@types/react": "^16.9.2",
"@types/react-dom": "^16.9.0",
"@types/react-helmet": "^5.0.10",
"babel-jest": "^24.9.0",
"babel-preset-gatsby": "^0.2.14",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"enzyme-to-json": "^3.4.0",
"husky": "^3.0.5",
"identity-obj-proxy": "^3.0.0",
"jest": "^24.9.0",
"prettier": "^1.18.2",
"react-test-renderer": "^16.9.0",
"redux-devtools-extension": "^2.13.8",
"source-map-support": "^0.5.13",
"ts-jest": "^24.1.0",
"ts-node": "^8.4.1"
},
"repository": {
"type": "git",
"url": "https://github.com/DWboutin/gatsby-react-intl-starter"
},
"husky": {
"hooks": {
"pre-commit": "npm run transpile"
}
}
}
我希望测试能够正确运行,但它会引发 SyntaxError: Unexpected identifier on Enzyme。
感谢您的帮助!
解决方案
从您的 jest.config.js 中,您没有解析 .js 文件(错误来自的 jest.setup.js)
修改这一行:
transform: {
'^.+\\.(ts|tsx)?$': `<rootDir>/jest-preprocess.js`
},
添加 .js 扩展名,如下所示:
transform: {
'^.+\\.(ts|tsx|js)?$': `<rootDir>/jest-preprocess.js`
},
应该做的伎俩。
另外,像这样导入适配器会抛出错误
import * as Adapter from 'enzyme-adapter-react-16'
改用这个
import Adapter from 'enzyme-adapter-react-16'
推荐阅读
- c# - 如何创建抽象类的实例?
- firebase - Firebase 计划功能在更新/部署时触发
- django - uwsgi.service 的作业失败,因为控制进程以错误代码退出
- c# - 方块破坏游戏的输入
- javascript - vue-router 为什么当我刷新一个包含 id 的 URL 的页面时,我失去了页面的所有设计
- c++ - PCL:如何从点云中删除偏差?
- batch-file - 用于在网络上查找域控制器的批处理脚本
- python-3.x - 如何找到重复实例的第一个实例并将其标记在 Pandas 的不同列上?
- windows - 为什么我的 MFC 应用程序在与两个滚动条交互后挂起?
- java - QueryDSl 多级结果聚合