Тестирование компонента высокого порядка с ферментом и жасмином - PullRequest
Новая
       17

Тестирование компонента высокого порядка с ферментом и жасмином

0 голосов
/ 29 июня 2018

Тестирование с Жасмином и Ферментом, и я пытался проверить HOC, который связан с редуксом. Возьмите, например, следующий HOC: 

import React, { Component } from 'react';
import { connect } from 'react-redux';

const WithAreas = (WrappedComponent) => {
  class WithAreasComponent extends Component {
    constructor(props) {
      super(props);    
    }    

    shouldRenderWrappedComponent(userObj) {
      return !!userObj.areas;
    }

    render() {
      const { userObj } = this.props;

      return shouldRenderWrappedComponent(userObj)
        ? <WrappedComponent {...this.props} />
        : null;
    }
  }

  function mapStateToProps(state) {
    const { info } = state;
    const { userObj } = info.userObj;

    return { userObj };
  }

  return connect(mapStateToProps)(WithAreasComponent);
};

export default WithAreas;

Допустим, я хочу протестировать этот HOC, чтобы проверить, отображается ли обернутый компонент в соответствии с userObj. Я думал о создании фиктивного компонента и передаче его в HOC, но это не работает.

Test.js Файл: 

import React from 'react';
import { shallow } from 'enzyme';
import jasmineEnzyme from 'jasmine-enzyme';

import WithAreas from './';

class MockComponent extends React.Component {
  render() {
    return(
      <div> MOCK </div>
    );
  }
}

function setup(extraProps) {
  const props = {
   info: {
    userObj: {
     id: 'example1'
    }
   },
  };

  Object.assign(props, extraProps);

  const WithAreasInstance = WithAreas(MockComponent);
  const wrapper = shallow(<WithAreasInstance {...props} />);

  return {
    props,
    wrapper
  };
}

fdescribe('<WithAreas />', () => {
  beforeEach(() => {
    jasmineEnzyme();
  });
  it('should render the Mock Component', () => {
    const { wrapper } = setup();
    expect(wrapper.find(MockComponent).exists()).toBe(true);
  });
});

Но это дает мне эту ошибку:

TypeError: (0 , _.WithAreas) is not a function at setup (webpack:///src/user/containers/WithAreas/test.js:20:47 <- src/test_index.js:9:18060087) at UserContext.<anonymous> (webpack:///src/user/containers//WithAreas/test.js:34:24 <- src/test_index.js:9:18060822) Что я делаю неправильно? Или какой подход вы могли бы порекомендовать?

Спасибо за любую помощь.

1 Ответ

0 голосов
/ 29 июня 2018

Вы неправильно импортируете HOC в тест. Вы установили его как экспорт по умолчанию, но используете именную деконструкцию экспорта.

Попробуйте это в своем тестовом файле: 

import WithAreas from './';

Также не забудьте передать хранилище вашему компоненту в тесте, иначе connect HOC не будет работать должным образом. 

shallow(
  <Provider store={store}>
    <WithAreasInstance ...>
  </Provider>)
...