我如何在类组件内部测试方法？

Question

我有此方法：

fizzBuzz = () => {
    let tokens = [];
    for (let i=1; i <= this.state.upperLimit; i++) {
        if (i % 15 === 0) {
            tokens.push("fizzbuzz");
        }  else if (i % 3 === 0) {
            tokens.push("fizz");
        } else if (i % 5 === 0) {
            tokens.push("buzz");
        } else {
            tokens.push(i) ;
        }    
    } 
    this.setState({message: tokens.join(" ")});
}

这只是FizzBu​​zz计算，方法是让用户在输入字段中输入fizzbuzz实现的上限并提交。然后，上述方法进行一些计算并在屏幕上显示该消息。

渲染返回内容的摘要：

<input value={this.upperLimit} type="number" min="1" placeholder="Enter Integer"/>
<button type="button" onClick={this.fizzBuzz}>Submit</button>
<label>{this.state.message}</label>

我正在使用Jest和React-Testing-Library，但不确定如何测试此功能。我是否需要重新安排类组件内部的操作方式以使其可测试？

Answer 1

RTL suggests to test what a real user would，因此您应该根据显示的组件编写测试：

• 更改输入值
• 单击按钮
• 测试标签中是否存在所请求的消息
• 用不同的输入编写另一个类似的测试，直到涵盖所有情况。

所以，好消息是您不需要对组件进行任何更改，单元测试应与内部实现脱钩。

有关该主题的详细说明，请参见this issue。>>