如何从 jest.setup.js 中的配置修复酶上的“语法错误：意外标识符”

Posted 2023-03-13

【中文标题】如何从 jest.setup.js 中的配置修复酶上的“语法错误：意外标识符”

【英文标题】：How to fix "SyntaxError: Unexpected identifier" on Enzyme from configs in jest.setup.js

【发布时间】：2020-01-24 18:38:19

【问题描述】：

我正在尝试使用 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/tests/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"]

package.json

  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Mikael Boutin <[e-mail]>",
  "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。

感谢您的帮助！

【参考方案1】：

从您的 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'

【讨论】：

谢谢！我没有注意到jest.setup.js正在被这个解析！