Babel 7 с шуткой не может запустить тестирование компонентов - PullRequest
Новая
       6

Babel 7 с шуткой не может запустить тестирование компонентов

0 голосов
/ 01 марта 2019

Я прочитал десятки постов, касающихся конфигурации Babel 7 с шуткой.Несмотря на все мои попытки, у меня все еще возникают проблемы в некоторых моих тестах.

По некоторым причинам, только тестовые компоненты, подключенные к хранилищу резервов, терпят неудачу.

package.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"
    }]
  ]
}

My Class Test 

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 comp 

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";

Затем я попытался проигнорировать response-redux и @babel: 

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

Но затем я получил еще одну ошибку: 

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

1 Ответ

0 голосов
/ 05 марта 2019

Попробуйте изменить

импортировать соединение из "act-redux / es / connect / connect ";

->

import {connect} из" реагировать-редукса ";

...