Тестирование HOC с помощью Recompose

У меня возникли некоторые проблемы с проверкой того, что опора срабатывает на моем HOC.

import { connect } from 'react-redux';
import { compose, lifecycle } from 'recompose';

import { fetchCurrentUser } from '../../actions/users';
import { getUser } from '../../reducers/users';
import User from '../../models/User';

export default Component => compose(
  connect(state => ({
    user: getUser(state),
  }),
  { fetchCurrentUser }),
  lifecycle({
    componentDidMount() {
      if (this.props.user instanceof User) return;
      this.props.fetchCurrentUser();
    },
  }),
)(Component);

Я хотел бы знать, является ли fetchCurrentUser триггером, когда user НЕ является экземпляром пользователя.

Пока у меня есть это в моем тесте:

it.only('fetches user if user is not a User instance', () => {
  const setup = () => {
  const props = {
    user: 'string',
    fetchCurrentUser: jest.fn(),
   };
   const enzymeWrapper = mounting(props);

   return {
     props,
      enzymeWrapper,
    };
  };

  // That returns 0 so false         
  expect(setup().props.fetchCurrentUser.mock.calls.length).toEqual(1);
});

Кажется, я не могу заменить реквизит, делая это таким образом. Если я зарегистрирую this.props в методе жизненного цикла, я никогда не увижу user: 'string'

заранее спасибо


reactjs testing higher-order-components recompose
person Got The Fever Media    schedule 24.09.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вам потребуется поверхностное монтирование компонента, чтобы проверить его функциональность.

it.only('fetches user if user is not a User instance', () => {
  const setup = () => {
  const props = {
    user: 'string',
    fetchCurrentUser: jest.fn(),
   };
   // shallow render the component
   const enzymeWrapper = shallow(<Component {...props} />)

   return {
      props,
      enzymeWrapper,
    };
  };

  expect(setup().props.fetchCurrentUser.mock.calls.length).toEqual(1);
});
person Shubham Khatri    schedule 24.09.2018
comment
спасибо за Ваш ответ. Это по-прежнему не заменяет fetchCurrentUser, который находится в HOC, на фиктивный, который я прохожу в тесте. Я пытался использовать .dive() несколько раз на мелком компоненте, затем я вижу, что код достигается внутри componentDidMount, но функция не является издевательством. - person Got The Fever Media; 24.09.2018
comment
кажется, что, когда connect передает эту опору следующему HOC, она имеет приоритет над опорой, переданной в тесте... - person Got The Fever Media; 24.09.2018
comment
@GotTheFeverMedia, да, это произойдет, и для того, чтобы тест работал, вы, вероятно, могли бы разделить свой компонент без отдельного подключения и протестировать его. - person Shubham Khatri; 24.09.2018
comment
Итак, ваша идея каким-то образом сработала ... : D Я опубликую полный ответ, но проголосуйте за ваш как за правильный. Спасибо - person Got The Fever Media; 24.09.2018

arrow_upward
0
arrow_downward

Итак, с помощью shubham-khatri я сделал следующее.

Разделил компонент на 2 разных и протестировал только один с вызовом. Таким образом, я мог издеваться над переданными реквизитами из теста.

Составная часть:

import { connect } from 'react-redux';
import { compose, lifecycle } from 'recompose';

import { fetchCurrentUser } from '../../actions/users';
import { getUser } from '../../reducers/users';
import User from '../../models/User';

const Connected = connect(state => ({
  user: getUser(state),
}),
{ fetchCurrentUser });

export const Enhanced = lifecycle({
  componentDidMount() {
    if (this.props.user instanceof User) return;

    this.props.fetchCurrentUser();
  },
});

export default Component => compose(
  Connected,
  Enhanced,
)(Component);

Тест:

describe('Fetching user', () => {
    const setup = (moreProps) => {
      const props = {
        fetchCurrentUser: jest.fn(),
        ...moreProps,
      };

      const EnhancedStub = compose(
        Enhanced,
      )(Component);

      const enzymeWrapper = shallow(
        <EnhancedStub {...props} />,
      );

      return {
        props,
        enzymeWrapper,
      };
    };

    it('fetches user if user is not a User instance', () => {
      expect(setup().props.fetchCurrentUser.mock.calls.length).toEqual(1);
    });

    it('does NOT fetch user if user is a User instance', () => {
      expect(setup({ user: new User({ first_name: 'Walter' }) }).props.fetchCurrentUser.mock.calls.length).toEqual(0);
    });
  });

Надеюсь, это поможет кому-то.

person Got The Fever Media    schedule 24.09.2018