reactjs - 开玩笑的 Babel 7 无法运行 redux 组件测试

问题描述

我已经阅读了几十篇关于用 jest 配置 babel 7 的帖子。尽管我做了所有尝试，但我在一些测试中仍然遇到了一些问题。

由于某种原因，只有连接到 redux store 的测试测试组件失败。

包.json

 "@babel/cli": "^7.1.2",
        "@babel/core": "^7.1.5",
        "@babel/node": "^7.0.0",
        "@babel/plugin-proposal-class-properties": "^7.1.0",
        "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
        "@babel/plugin-syntax-dynamic-import": "^7.0.0",
        "@babel/plugin-transform-async-to-generator": "^7.1.0",
        "@babel/plugin-transform-object-assign": "^7.0.0",
        "@babel/plugin-transform-runtime": "^7.1.0",
        "@babel/preset-env": "^7.1.0",
        "@babel/preset-react": "^7.0.0",
        "babel-jest": "^23.6.0",
        "babel-core": "^7.0.0-bridge.0",

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "last 2 versions"
          ]
        },
        "debug": false
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    ["babel-plugin-react-css-modules", {
      "generateScopedName": "[name]__[local]___[hash:base64:5]",
      "webpackHotModuleReloading": true
    }],
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-transform-modules-commonjs",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-transform-runtime",
    ["react-intl", {
      "messagesDir": "./src/translations/extractedMessages"
    }]
  ]
}

我的班级测试

import { shallow } from 'enzyme';
import { shallowToJson } from 'enzyme-to-json';
import { ReduxComp } from '../kpis/ReduxComp';
import puppeteer from 'puppeteer';
import universal from 'jaybe-react-universal-componentv4';

describe('ReduxComp in Dashboard', () => {
  it('should render the ReduxComp', () => {
    const list = [
        {
            "id": 1,
            "type": "1",
            "client_id": "CONS",
            "queue_name": "TBD",
            "dashboard": true,
            "kpi_number": 1234,
            "kpi_percentage": 0,
            "created_at": null,
            "updated_at": null
        },
        ...
    ];
    const component = shallow(<ReduxComp  data={list} />);
    expect(shallowToJson(component)).toMatchSnapshot();
  });
});

Redux 组合

import React from "react";
import connect from "react-redux/es/connect/connect";

...

export default connect(mapStateToProps, {
    ...ReduxCompActions
})(withRouter(ReduxComp))

jest.config.js

module.exports = {
    verbose: true,
    preset: "jest-puppeteer",
    moduleDirectories: ["node_modules", "src"],
    setupFiles: [
        "./test/setup.js"
    ],
    transform: {
        "\\.(js|jsx)?$": "./test/transform.js",
    },
   /* transformIgnorePatterns: [
        "/node_modules/(?!(react-redux|@babel)).+\\.js$"
    ],*/
}

我最终收到以下错误：

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    Details:



  /Users/jb/Documents/Github/****/node_modules/react-redux/es/connect/connect.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import
_extends from "@babel/runtime/helpers/esm/extends";
                                                                                             ^^^^^^

SyntaxError: Unexpected token import
1 | import React from "react";
2 | import CommonComponent from "./CommonComponent";
> 3 | import connect from "react-redux/es/connect/connect";

然后我试图忽略 react-redux 和@babel：

transformIgnorePatterns: [
        "/node_modules/(?!(react-redux|@babel)).+\\.js$"
    ]

但后来我得到另一个错误：

TypeError: (0 , _typeof4.default) is not a function
      91 | };
      92 | 
    > 93 | export default connect(mapStateToProps, {

标签： reactjsjestjsbabeljs

reactjs - 开玩笑的 Babel 7 无法运行 redux 组件测试

问题描述

解决方案

推荐阅读