Как мне провести модульное тестирование этого React-компонента?

Question

Это мой компонент.Это в основном оболочка для другого компонента.У меня вопрос, как я должен модульное тестирование этого компонента?Помимо проверки состояния и вызова двух методов и проверки их обновления.

Кроме того, кажется, что это просто отображает реквизит / состояние, так есть ли необходимость в этом проверять?

import React from 'react';
import { PropTypes as PT } from 'prop-types';

export default Wrapped =>
  class extends React.Component {
    static propTypes = {
      numOne: PT.number,
    };

    constructor(props) {
      super(props);

      this.state = {
        showModal: false,
      };
    }

    openModal = () => {
      this.setState({
        showModal: true,
      });
    };

    closeModal = () => {
      this.setState({
        showModal: false,
      });
    };

    render() {
      return (
        <Wrapped
          numberValue={this.props.numOne}
          showHolidayModal={this.state.showHolidayListModal}
          showModal={this.openModal}
          closeModal={this.closeModal}
          {...this.props}
        />
      );
    }
  };

Это мой компонент (только пример), которым я тоже являюсьпроверка того, что он передает то, что передано в

import React from 'react';
import { PropTypes as PT } from 'prop-types';
import container from './container';
import { Card, Button, Modal } from '../common';

export const Leave = props => {
  return (
    <div>
      <span>Dummy data : {props.numberValue}</span>
      {props.showModal && <Modal />}

      <Button onClick={props.closeModal} label="close" />
    </div>
  );
};

Leave.propTypes = {
  numberValue: PT.number,
  showModal: PT.bool,
  openModal: PT.func,
  closeModal: PT.func,
};

export default container(Leave);

Answer 1

Может быть что-то вроде этого.Вы должны проверить свою обертку для рендеринга компонента Wrapped с его реквизитом.Также проверьте свои функции, которые обновляют состояние.

const Bar = props => <span />
const Test = container(Bar)
const wrapper = shallow(<Test prop1={1} prop2={2}>)

const bar = wrapper.find(Bar)
expect(bar).to.have.length(1)
expect(bar.props()).contains({ prop1: 1, prop2: 2})

bar.props().showModal()
expect(wrapper.state().showModal).to.be(true)