Рубрики
Без рубрики

Как проверить компоненты высокого порядка в реакцию

Как тестировать компоненты высокого порядка в реакции. Помечено redux, WebDev, тестированием, JavaScript.

вступление

Примечание : Я предполагаю, что вы несколько знакомы для тестирования подразделения в JavaScript и знаете, каким является компонент высокого порядка.

Я добавляю модульные тесты на один из моих проектов для домашних животных. Я использую React - Boilerplate Как приложение стартера, так фермент и шутки уже подключены.

Это краткое прогулку за проблему, которую я только что столкнулся.

Эта проблема

Тестирование HOCS, является довольно конкретным сценарием, поскольку он использует MapStatetoPOOPs и компонент высокого порядка, конечно.

Давайте возьмем вашу классику Аутентификация компонент. Это читает логический Из состояния и оценивает, будет ли пользователь аутентифицирован или нет, и возвращает компонент или перенаправляет до данного URL.

Это то, что наш компонент выглядит:

/**
 *
 * Auth.js
 *
 */

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import { bindActionCreators } from 'redux';
import PropTypes from 'prop-types';

export default function(ComposedComponent) {
  class Authentication extends Component {
    /* eslint-disable */
    componentWillMount() {
      if (this.props.authenticated === false) {
        return this.props.changePage();
      }
    }

    componentWillUpdate(nextProps) {
      if (nextProps.authenticated === false) {
        return this.props.changePage();
      }
    }
    /* eslint-enable */

    render() {
      return ;
    }
  }

  Authentication.propTypes = {
    authenticated: PropTypes.bool,
    changePage: PropTypes.func,
  };

  const mapStateToProps = state => ({ authenticated: state.user.isLoaded });

  const mapDispatchToProps = dispatch =>
    bindActionCreators({ changePage: () => push('/login') }, dispatch);

  return connect(
    mapStateToProps,
    mapDispatchToProps,
  )(Authentication);
}

Решение

Для магазина мы хорошо используем сладкую библиотеку, которая позволяет нам сделать магазин redux, как вы можете себе представить, это называется redux-mock-магазин Отказ

пряжа добавить redux-mock-магазин –dev

Тогда наш тест должен сделать следующее:

  1. Создайте базовый магазин с собственностью, к которому наши HOC нужно отображать. В этом сценарии есть Store.user.isloaded Отказ
  2. Создайте компонент, который Auth Должен рендер, когда пользователь аутентифицируется.
  3. Утверждать, что он возвращает (или делает) что-то.

Давайте пойдем шаг за шагом.



import configureStore from 'redux-mock-store';
import Auth from './Auth';


let store;

describe(' test', () => {
  beforeEach(() => {
    const mockStore = configureStore();

    // creates the store with any initial state or middleware needed
    store = mockStore({
      user: {
        isLoaded: true,
      },
    });
...

Обратите внимание, что Mockstore принимает как аргумент, как следует выглядеть наше государство. С Auth Только заботится о user.isloaded , мы сделаем это правда и оцените, что Компонент оказывается. Мы будем использовать самые общедоступные, я могу думать в это время.

// Auth.spec.js
...
  it('Should render the component only when auth prop is true', () => {
    const Component = 
Hola
;
    const ConditionalComponent = Auth(Component);
    const wrapper = shallow();
    expect(wrapper).not.toBe(null);

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

Наш тест в одном файле.

/**
 *
 * Auth.spec.js
 *
 */

import React from 'react';
import { shallow } from 'enzyme';
import configureStore from 'redux-mock-store';

import Auth from '../Auth';

let store;

describe('', () => {
  beforeEach(() => {
    const mockStore = configureStore();

    // creates the store with any initial state or middleware needed
    store = mockStore({
      user: {
        isLoaded: true,
      },
    });
  });
  it('Should render the component only when auth prop is true', () => {
    const Component = 
Hola
;
    const ConditionalHOC = Auth(Component);
    const wrapper = shallow();
    expect(wrapper).not.toBe(null);
  });
});

Заключение

Этот тест охватывает только один сценарий, но все утверждения необходимо начать отсюда.

Ваше здоровье.

Оригинал: “https://dev.to/papaponmx/unit-testing-hoc-connected-components-2d8h”

Читайте ещё по теме: