reactjs - 如何设置 Jest 以正确 babel-transpile CRA 项目？

问题描述

我继承了一个已被弹出的Create React App v1.5.2项目，我不知道对默认值进行了哪些更改，但我的问题是yarn test运行 Jest，找到我的示例测试，但在编译过程中是由于无法识别 ES6 模块而丢失。这是我得到的错误：

FAIL  src/components/ui/atoms/sample-atom/__tests__/sample-atom-test.js
 ● Test suite failed to run
   /Users/me/project/config/polyfills.js:3
   import 'core-js/es6/promise';
          ^^^^^^^^^^^^^^^^^^^^^
   SyntaxError: Unexpected string
     at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

这是project.json文件：

{
    "name": "project",
    "version": "1.0.3",
    "private": true,
    "scripts": {
        "start": "node scripts/start.js",
        "dev": "yarn start",
        "build": "node scripts/build.js",
        "test": "node scripts/test.js --env=jsdom",
        "mock": "node mock/index.js",
        "flow": "flow",
        "lint": "eslint . --ext js,jsx",
        "lint-build": "eslint . -c .eslintrc-build.js --ext js,jsx",
        "generate": "plop",
        "storybook": "start-storybook -s ./public -p 6006",
        "build-storybook": "KEEP_PROP_TYPES=true build-storybook"
    },
    "jest": {
        "collectCoverageFrom": [
        "src/**/*.{js,jsx,mjs}"
        ],
        "setupFiles": [
        "<rootDir>/config/polyfills.js"
        ],
        "testMatch": [
        "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
        "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
        ],
        "testEnvironment": "node",
        "testURL": "http://localhost",
        "transform": {
        "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
        "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
        "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
        },
        "transformIgnorePatterns": [
        "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
        ],
        "moduleNameMapper": {
        "^react-native$": "react-native-web"
        },
        "moduleFileExtensions": [
        "web.js",
        "mjs",
        "js",
        "json",
        "web.jsx",
        "jsx",
        "node"
        ]
    },
    "dependencies": {
        "@babel/runtime": "^7.2.0",
        "classnames": "^2.2.6",
        "connected-react-router": "^6.2.2",
        "core-js": "^2.6.2",
        "highcharts": "7.0.3",
        "highcharts-react-official": "2.0.0",
        "history": "^4.7.2",
        "hoist-non-react-statics": "^3.2.1",
        "object-assign": "4.1.1",
        "promise": "8.0.2",
        "prop-types": "^15.6.2",
        "raf": "3.4.1",
        "react": "^16.7.0",
        "react-animate-height": "^2.0.7",
        "react-dom": "^16.7.0",
        "react-intl": "^2.8.0",
        "react-perf-devtool": "^3.1.8",
        "react-phone-input-2": "^2.8.0",
        "react-redux": "^6.0.0",
        "react-router": "^4.3.1",
        "react-router-dom": "^4.3.1",
        "react-router-redux": "^4.0.8",
        "react-swipeable": "^5.0.1",
        "react-typed": "^1.1.0",
        "reactour": "^1.13.1",
        "recompose": "^0.30.0",
        "redux": "^4.0.1",
        "redux-saga": "^1.0.0",
        "storybook-react-router": "^1.0.2",
        "whatwg-fetch": "3.0.0",
        "why-did-you-update": "^1.0.6"
    },
    "devDependencies": {
        "@babel/core": "^7.2.2",
        "@babel/plugin-proposal-class-properties": "^7.2.3",
        "@babel/plugin-proposal-export-default-from": "^7.2.0",
        "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
        "@babel/plugin-proposal-optional-chaining": "^7.2.0",
        "@babel/plugin-syntax-dynamic-import": "^7.2.0",
        "@babel/plugin-transform-arrow-functions": "^7.2.0",
        "@babel/plugin-transform-destructuring": "^7.2.0",
        "@babel/plugin-transform-react-jsx": "^7.2.0",
        "@babel/plugin-transform-regenerator": "^7.0.0",
        "@babel/plugin-transform-runtime": "^7.2.0",
        "@babel/preset-env": "^7.2.3",
        "@babel/preset-flow": "^7.0.0",
        "@babel/preset-react": "^7.0.0",
        "@babel/runtime-corejs2": "^7.2.0",
        "@sambego/storybook-styles": "^1.0.0",
        "@storybook/addon-actions": "^4.1.7",
        "@storybook/addon-backgrounds": "^4.1.7",
        "@storybook/addon-console": "^1.1.0",
        "@storybook/addon-info": "^4.1.7",
        "@storybook/addon-knobs": "^4.1.7",
        "@storybook/addon-links": "^4.1.7",
        "@storybook/addon-viewport": "^4.1.7",
        "@storybook/addons": "^4.1.7",
        "@storybook/react": "^4.1.7",
        "@svgr/core": "^4.1.0",
        "@svgr/webpack": "^4.1.0",
        "autoprefixer": "9.4.5",
        "babel-eslint": "10.0.1",
        "babel-jest": "23.6.0",
        "babel-loader": "^8.0.5",
        "babel-plugin-lodash": "^3.3.4",
        "babel-plugin-macros": "^2.4.5",
        "babel-plugin-transform-react-remove-prop-types": "^0.4.23",
        "babel-preset-react-app": "7.0.0",
        "case-sensitive-paths-webpack-plugin": "2.1.2",
        "chalk": "2.4.2",
        "connect": "^3.6.6",
        "css-loader": "2.1.0",
        "dotenv": "6.2.0",
        "dotenv-expand": "4.2.0",
        "eslint": "^5.14.1",
        "eslint-config-react-app": "^3.0.6",
        "eslint-loader": "2.1.1",
        "eslint-plugin-flowtype": "3.2.1",
        "eslint-plugin-import": "2.14.0",
        "eslint-plugin-jsx-a11y": "6.1.2",
        "eslint-plugin-react": "7.12.4",
        "extract-text-webpack-plugin": "^4.0.0-beta.0",
        "file-loader": "3.0.1",
        "flow-bin": "^0.91.0",
        "fs-extra": "7.0.1",
        "html-webpack-plugin": "^4.0.0-beta.5",
        "inquirer-directory": "^2.1.0",
        "jest": "23.6.0",
        "js-yaml": "^3.12.1",
        "lost": "^8.3.0",
        "mini-css-extract-plugin": "^0.5.0",
        "node-sass": "^4.11.0",
        "plop": "^2.2.0",
        "postcss-flexbugs-fixes": "4.1.0",
        "postcss-loader": "3.0.0",
        "rc-slider": "^8.6.5",
        "react-dev-utils": "7.0.1",
        "sass-loader": "^7.1.0",
        "storybook-addon-intl": "^2.3.2",
        "storybook-addon-redux-listener": "^0.1.7",
        "storybook-react-router": "^1.0.2",
        "style-loader": "0.23.1",
        "sw-precache-webpack-plugin": "0.11.5",
        "swagger-tools": "^0.10.4",
        "url-loader": "1.1.2",
        "webpack": "4.29.0",
        "webpack-dev-server": "3.1.14",
        "webpack-manifest-plugin": "2.0.4"
    }
}

这是.babelrc.js我在项目中找到的文件：

const env = process.env.BABEL_ENV || process.env.NODE_ENV;
const isDev = env === 'development';
const isProd = env === 'production';
const isTest = env === 'test';
const keepPropTypes = !!process.env.KEEP_PROP_TYPES;

/**
* babelrc "extracted" from babel-preset-react-app,
* in order to customize 'babel-plugin-transform-react-remove-prop-types' plugin behavior.
* For details check out original babel config file
* https://github.com/facebook/create-react-app/blob/next/packages/babel-preset-react-app/index.js
*/

module.exports = {
presets: [
    isTest && [
    '@babel/preset-env',
    {
        targets: {
        node: '6.12'
        }
    }
    ],
    !isTest && [
    '@babel/preset-env',
    {
        useBuiltIns: 'entry',
        modules: false
    }
    ],
    [
    '@babel/preset-react',
    {
        development: isDev || isTest,
    }
    ],
    '@babel/preset-flow'
].filter(Boolean),
plugins: [
    'babel-plugin-macros',
    '@babel/plugin-transform-destructuring',
    '@babel/plugin-proposal-class-properties',
    [
    '@babel/plugin-proposal-object-rest-spread',
    {
        useBuiltIns: true
    }
    ],
    [
    '@babel/plugin-transform-react-jsx',
    {
        useBuiltIns: true
    }
    ],
    [
    '@babel/plugin-transform-runtime',
    {
        helpers: false,
        corejs: 2,
        regenerator: true,
        useESModules: true
    }
    ],
    // keepPropTypes -> Prevent prop types to be removed during storybook build
    isProd && !keepPropTypes && [
    'babel-plugin-transform-react-remove-prop-types',
    {
        removeImport: true,
    }
    ],
    !isTest && [
    '@babel/plugin-transform-regenerator',
    {
        async: false,
    }
    ],
    '@babel/plugin-syntax-dynamic-import',
    isTest && 'babel-plugin-transform-dynamic-import',
    // CUSTOM PLUGINS
    // Lodash tree shaking plugin (convert normal imports to cherrypick imports)
    // allows foo?.baz syntax
    // '@babel/plugin-proposal-optional-chaining',
    // allows export Something from './something' - Disabled for now
    // '@babel/plugin-proposal-export-default-from'
    isProd && '@babel/plugin-transform-arrow-functions',
].filter(Boolean)
}

他们没有写任何测试，所以我不认为他们搞砸了与开玩笑相关的事情。

弹出当前版本的 CRA 甚至不会添加.babelrc.js文件，所以我不知道以前的版本是否添加了，或者我拥有的文件是否是他们的。

任何帮助找出我的配置有什么问题？谢谢

编辑

未转译的文件代码 ( /config/polyfills.js) 如下。我猜这只是我正在使用的 create-react-app 版本使用的标准弹出 polyfill 文件。

'use strict';
import 'core-js/es6/promise';
import 'core-js/es6/array';
import 'core-js/es6/object';
import 'core-js/es7/array';
import 'core-js/fn/array/includes';
import 'core-js/fn/string/includes';
import 'core-js/fn/object/assign';
import 'whatwg-fetch'

// In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
// We don't polyfill it in the browser--this is user's responsibility.
if (process.env.NODE_ENV === 'test') {
require('raf').polyfill(global);
}

标签： reactjsjestjsbabeljscreate-react-app

reactjs - 如何设置 Jest 以正确 babel-transpile CRA 项目？

问题描述

解决方案

推荐阅读