2

中的Atlaskit 包node_modules导致 Jest 在弹出的 create-react-app 中失败。App.test.js到目前为止,我只有默认文件并收到SyntaxError: Unexpected token export来自@atlaskit/dropdown-menu.

错误图像

我查看了有关 StackOverflow 和 Github 问题的所有不同问题,虽然每个人都建议尝试的标准答案是专注于transformIgnorePatternsJest 配置,但我尝试过的任何方法似乎都没有奏效,所以它可能是一个单独的问题。

package.json我目前的 Jest 配置中如下。这是弹出后显示的默认配置:

包.json

"jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "resolver": "jest-pnp-resolver",
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jsdom",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ]
  }

我还删除了babel配置,并eslintpackage.json它们自己的单独文件中取出。

.babelrc.js

const plugins = [
  [
    "module-resolver",
    {
      root: [
        "."
      ],
      alias: {
        atoms: "./src/components/atoms",
        molecules: "./src/components/molecules",
        organisms: "./src/components/organisms",
        pages: "./src/components/pages"
      }
    }
  ]
]

module.exports = {
  env: {
    development: {
      presets: ["react-app"],
      plugins,
    },
    local: {
      presets: ["react-app"],
      plugins,
    },
    qa: {
      presets: ["react-app"],
      plugins,
    },
    stage: {
      presets: ["react-app"],
      plugins,
    },
    production: {
      presets: ["react-app"],
      plugins,
    },
    test: {
      presets: [
        ["react-app",
          { 'preset-env': {
            'modules': 'commonjs'
          }}
        ]
      ],
      plugins,
    }
  }
}

.eslintrc.json

{
    "extends": ["standard", "standard-react"],
    "env": {
        "browser": true,
        "es6": true,
        "jest": true
    },
    "plugins": [
        "standard",
        "react"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true,
            "javascript": true,
            "modules": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {

    }
}

我希望,当npm run test被调用时,所有 node_modules而不仅仅是@atlaskit相关的将被正确地转换为不会导致 Jest 失败的代码。

4

0 回答 0