bugfix> reactjs > 投稿

コンポーネントが小道具を受け取り、ボタンをクリックすると値が増加することをテストしたい。

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

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

あなたの答え