Как мне протестировать HOC с помощью ReactJS, Enzyme и Jest?

Question

Я хочу проверить, что компонент получает реквизит, и что нажатие на кнопку увеличивает значение.

Я знаю, как тестировать без использования HOC, но я не знаю, как тестировать с его использованием.

Пример:

// component
const Test = ({ value, increment }) => {
  return (
    <div>
      {value}
      <button onClick={increment}>Click</button>
    </div>
  );
}
Test.propTypes = {
  name: PropTypes.string.isRequired,
  increment: PropTypes.func.isRequired
}

// higher order component
const test = WrappedComponent => {
  return class extends Component {
    state = { value: 0 }

    increment = () => {
      this.setState({ value: this.state.value + 1 });
    }

    render() {
      return (
        <WrappedComponent 
          increment={this.increment} 
          value={this.state.value} />
      );
    }
  }
}

// test
// Error: failed the prop type name
it("renders without crashing", () => {
  const Container = test(Test);
  shallow(<Container />);
});

Answer 1

Вы можете «переслать» реквизит:

const test = WrappedComponent => {
  return class extends Component {
    state = { value: 0 }

    increment = () => {
      this.setState({ value: this.state.value + 1 });
    }

    render() {
      return (
        <WrappedComponent 
          increment={this.increment} 
          value={this.state.value}
          {...this.props}
        />
      );
    }
  }
}

it("renders without crashing", () => {
  const Container = test(Test);
  shallow(<Container name="foo" />);
});