How should I unit test this React Component?

Question

This is my component. It's basically a wrapper for another component. My question is how should I unit test this component? Apart from checking state and calling the two methods and making sure they update the state.

Apart from that, that just seems to render the props/state so is there any need to test this?

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}
        />
      );
    }
  };

This is my component (just example) Which I am also unit testing, that it renders what is passed in

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);

your Wrapped component renders a Wrapped inside it? Is it an infinite recursion? — Murilo Cruz
No, it works fine. See line 'export default container(Leave)'. My team has decided to go with a Higher Order function structure for our components — coding123

Sy Tran Sy Tran · Accepted Answer · 2018-06-05T17:21:50

Could be something like this. You should test you wrapper to render Wrapped component with its props. Also test your functions that update state.

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)

How should I unit test this React Component?

1 Answers