Jest-тесты с ферментом и connect () дают `import connectAdvanced from '../ components / connectAdvanced';`

Question

У меня проблемы с выполнением простого теста jest/enzyme при использовании подключения к компоненту. Я попытался использовать dive() как предложено здесь: Тестирование компонента, подключенного к Redux, с использованием Enzyme . Но ошибка все та же.

Я хотел бы иметь возможность тестировать компоненты, которые обернуты мелкой, а не эта ошибка (очевидно)

Ошибка консоли

 FAIL  src/containers/Home/index.test.js
  ● Test suite failed to run

    /var/www/cloud/websites/www/node_modules/react-redux/es/connect/connect.js:5
    import connectAdvanced from '../components/connectAdvanced';
           ^^^^^^^^^^^^^^^

    SyntaxError: Unexpected identifier

      at new Script (vm.js:74:7)
      at Object.<anonymous> (src/components/shared/buttons/index.js:3:16)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.482s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

home.index.js

import React, { PureComponent, Fragment } from 'react';
import ButtonUI from '../../components/shared/buttons';

export default class Home extends PureComponent {
  render() {
    return (
      <ButtonUI galabel="testLabel" gaaction="testAction">
        Fire GA Test
      </ButtonUI>
    );
  }
}

компоненты / общие / кнопки / index.js

import React, { PureComponent } from 'react';
import connect from 'react-redux/es/connect/connect';

class ButtonUI extends PureComponent {
  render() {
    return (
      <button>
        {this.props.children}
      </button>
    );
  }
}

export default connect()(ButtonUI);

дом / index.test.js

import React, { PureComponent } from 'react';
import Home from './index.js';
import { shallow, mount, render } from 'enzyme';

const wrapper = shallow(<Home />).dive();

describe('Home Page Can Render', () => {
  it('Contains a header', () => {
    expect(wrapper.find('h5')).to.have.lengthOf(1)
  });
});

Package.json

"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"connected-react-router": "^4.4.1",
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"enzyme-to-json": "^3.3.4",
"react-scripts": "^2.1.1",

Answer 1

connect импортируется как модуль es6, а NodeJS среда выполнения не знает, что с ним делать.

import connect from 'react-redux/es/connect/connect';

Обычно авторам библиотеки предоставляется библиотека в Commonjs для обеспечения взаимодействия с несколькими средами, а предоставляют ее в качестве точки входа для своего модуля

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

import { connect } from "react-redux";