【问题标题】:Jest Fails on import and exportJest 导入和导出失败
【发布时间】:2019-08-15 21:48:30
【问题描述】:

为 CRA 应用程序运行测试时,我收到所有组件的以下错误:

ERROR: 'import' and 'export' may appear only with 'sourceType: "module"'

我正在使用 create-react-app,react 16.7.0-alpha.2 和 react-dom 16.7.0-alpha.2。

react 应用嵌套在根目录下的一个目录中。

我在运行 npm 脚本的根目录中运行 jest: "test": "jest --config jest.local.config.json --coverage"

我的笑话配置如下:

{
  "testEnvironment": "node",
  "moduleFileExtensions": [
    "js"
  ],
  "coverageDirectory": "coverage",
  "testResultsProcessor": "./node_modules/jest-junit-reporter",
  "collectCoverageFrom": [
    "react-app/!src/__tests__/**/*.js"
  ],
  "testMatch": [
    "**/react-app/src/__tests__/**/?(*.)+(spec|test).js?(x)"
  ]
}

eslintrc 看起来像:

{
  "extends": [
    "airbnb",
    "prettier",
    "prettier/react"
  ],
  "env": {
    "browser": true,
    "node": true,
    "jest": true
  },
  "globals": {
    "React": true
  },
  "parser": "babel-eslint",
  "parserOptions": {
    "sourceType": "module",
    "allowImportExportEverywhere": true,
    "ecmaVersion": 8,
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true,
      "impliedStrict": true,
      "classes": true,
      "jsx": true
    }
  },
  "plugins": [
    "prettier"
  ],
  "rules": {
    "no-unused-vars": [
      1,
      {
        "argsIgnorePattern": "res|next|^err"
      }
    ],
    "no-unused-expressions": [
      2,
      {
        "allowTaggedTemplates": true
      }
    ],
    "arrow-body-style": [
      2,
      "as-needed"
    ],
    "no-param-reassign": [
      2,
      {
        "props": false
      }
    ],
    "no-console": 0,
    "import/prefer-default-export": 0,
    "import": 0,
    "func-names": 0,
    "space-before-function-paren": 0,
    "comma-dangle": 0,
    "max-len": 0,
    "import/extensions": 0,
    "no-underscore-dangle": 0,
    "consistent-return": 0,
    "react/display-name": 1,
    "react/react-in-jsx-scope": 0,
    "react/forbid-prop-types": 0,
    "react/no-unescaped-entities": 0,
    "jsx-a11y/accessible-emoji": 0,
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [
          ".js",
          ".jsx"
        ]
      }
    ],
    "radix": 0,
    "no-shadow": [
      2,
      {
        "hoist": "all",
        "allow": [
          "resolve",
          "reject",
          "done",
          "next",
          "err",
          "error"
        ]
      }
    ],
    "quotes": [
      2,
      "single",
      {
        "avoidEscape": true,
        "allowTemplateLiterals": true
      }
    ],
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "es5",
        "singleQuote": true,
        "printWidth": 120
      }
    ],
    "no-return-assign": 0,
    "no-plusplus": [
      "error",
      {
        "allowForLoopAfterthoughts": true
      }
    ],
    "jsx-a11y/href-no-hash": "off",
    "jsx-a11y/anchor-is-valid": [
      "warn",
      {
        "aspects": [
          "invalidHref"
        ]
      }
    ],
    "react/prefer-stateless-function": 0,
    "react/prop-types": [
      2,
      {
        "ignore": [
          "children"
        ]
      }
    ],
    "jsx-a11y/label-has-for": 0
  }
}

在根目录下,我有以下依赖和devDependencies:

"dependencies": {
    "bluebird": "^3.5.3",
    "jest": "^23.6.0",
    "jest-junit-reporter": "^1.1.0",
    "jest-mock-console": "^0.4.2",
    "prettier": "^1.15.3",
  },
  "devDependencies": {
    "babel-eslint": "9.0.0",
    "eslint": "5.6.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^3.3.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-prettier": "^3.0.0",
    "eslint-plugin-react": "^7.11.1"
  }

在 react 应用程序中,我有以下依赖项:

"dependencies": {
    "babel-plugin-import": "^1.11.0",
    "connected-react-router": "^6.0.0",
    "history": "^4.7.2",
    "node-sass": "^4.11.0",
    "prop-types": "^15.6.2",
    "react": "^16.7.0-alpha.2",
    "react-dom": "^16.7.0-alpha.2",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.1",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  }

我不想从 CRA 中弹出,因为应用程序的大小不是它需要弹出的。

如果在 react-app 目录中运行 npx react-scripts test 我能够正确执行测试,但通过调用 jest 从父目录运行测试总是返回导入/导出错误。我是否缺少配置?

【问题讨论】:

  • react-scripts test 创建一个特定于 CRA 应用程序的 jest 配置并运行 jest。这是为 CRA 应用程序启动 jest 的推荐方式。如果您不想从 CRA 中弹出并想从父目录运行测试,那么我建议您尝试从父目录 package.json 启动子目录 react-scripts 而不是直接启动jest
  • 感谢@brian-lives-outdoors。我担心这可能必须是解决方案。我这样做了,它有效,但希望有一个更优雅的解决方案,或者可能是我完全错过的东西。

标签: reactjs jestjs babeljs


【解决方案1】:

使用 ES5 导入。

例如

const axios = require('axios');

【讨论】:

    猜你喜欢
    • 2019-10-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-09-11
    • 2023-03-11
    • 1970-01-01
    • 2019-06-29
    • 1970-01-01
    相关资源
    最近更新 更多