typescript - 如何在 lerna + yarn 工作区 monorepo 中配置 jest + 酶

Question

我正在尝试建立一个 Lerna + yarn 工作区 monorepo。我已经配置好软件包并且构建良好，但是在设置我的测试环境时遇到了很多麻烦。

在项目内部，我使用 webpack、babel 和 typescript。我想用 jest、babel-jest 和酵素进行测试。

每当我尝试运行包含酶玩笑的测试时，我都会收到带有以下详细信息的“玩笑遇到意外令牌”错误：

monorepo/packages/core/src/setupEnzyme.ts:1

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { configure } from "enzyme";
                                                                                                    ^

    SyntaxError: Unexpected token {

      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 Array.forEach (<anonymous>)```

我的组件：

monorepo/packages/core/src/button/button.tsx

import { Box, Button as MuiButton } from "@material-ui/core"
import * as React from "react"


export function Button() {
  return (
    <Box>
      <MuiButton>Im a button</MuiButton>
    </Box>
  )
}

我的测试

monorepo/packages/core/src/button/button.test.tsx

import { mount } from "enzyme"
import * as React from "react"

import { Button } from "./button"

describe("Button Component", () => {
  it("renders", () => {
    const wrapper = mount(<Button />)
    expect(wrapper).toMatchSnapshot()
  })
})

酶设置：

monorepo/packages/core/src/setupEnzyme.ts

import { configure } from "enzyme"
import Adapter from "enzyme-adapter-react-16"

configure({ adapter: new Adapter() })

笑话配置：

monorepo/packages/core/jest.config.js

module.exports = {
  transform: {
    "^.+\\.(ts|tsx)$": "babel-jest",
  },
  snapshotSerializers: ["enzyme-to-json/serializer"],
  setupFilesAfterEnv: ["<rootDir>/src/setupEnzyme.ts"],
}

通天塔配置：

monorepo/packages/core/babel.config.js

module.exports = {
  ignore: ["**/*.spec.ts", "**/*.test.ts", "**/*.test.tsx"],
  sourceMaps: "inline",
  presets: [
    [
      "@babel/preset-env",
      {
        targets: "> 0.25%, not dead",
        corejs: "3",
        useBuiltIns: "entry",
        modules: "false",
      },
    ],
    "@babel/preset-react",
    "@babel/typescript",
  ],
  plugins: [
    [
      "babel-plugin-module-resolver",
      {
        root: ["./"],
        alias: {
          src: "./src",
          "@core": "./src",
        },
      },
    ],
  ],
}

配置：

monorepo/tsgonfig.json

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": "./",
    "paths": {
      "@core/*": ["packages/core/src/*"],
      "@portal/*": ["packages/portal/src/*"],
      "@homepage/*": ["packages/homepage-designer/src/*"]
    }
  },
  "include": [
    "packages/core/src/index.ts",
    "packages/portal/src/index.tsx",
    "packages/homepage-designer/src/index.tsx",
    "packages/core/src/**/*.test.tsx",
    "packages/portal/src/**/*.test.tsx",
  ],
  "exclude": ["**/node_modules"]
}

核心包.json：

monorepo/packages/core/package.json

{
  "name": "@person/core",
  "version": "1.0.0",
  "main": "dist/index.js",
  "typings": "src/index.d.ts",
  "license": "MIT",
  "scripts": {
    "test": "jest",
    "bootstrap": "lerna bootstrap --use-workspaces",
    "build": "rm -rf ./dist && babel src --out-dir ./dist --extensions '.ts,.tsx' --config-file ./babel.config.js --ignore 'src/setupEnzyme.ts'"
  }
}

根包.json：

monorepo/monorepo/package.json

{
  "name": "@person/monorepo",
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  "devDependencies": {
    "@babel/cli": "^7.7.4",
    "@babel/core": "^7.7.4",
    "@babel/preset-env": "^7.7.4",
    "@babel/preset-react": "^7.7.4",
    "@babel/preset-typescript": "^7.7.4",
    "@types/enzyme": "^3.10.3",
    "@types/jest": "^24.0.23",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^24.9.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-module-resolver": "^3.2.0",
    "babel-plugin-styled-components": "^1.10.6",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.15.1",
    "enzyme-to-json": "^3.4.3",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^24.9.0",
    "lerna": "^3.19.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "source-map-loader": "^0.2.4",
    "styled-components": "^4.4.1",
    "ts-jest": "^24.2.0",
    "typescript": "^3.7.3",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0",
    "@types/react-dom": "^16.9.4"
  },
  "dependencies": {
    "@material-ui/core": "^4.7.1"
  }
}

我的问题是我的酶测试设置哪里出错了？

标签： typescriptjestjsbabeljsenzymeyarn-workspaces