如何在类组件中测试方法？

debugcn 发表于 Dev

Euridice01

我有这种方法：

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(" ")});
}

这是通过让用户在输入字段中输入fizzbuzz实现的上限并提交来进行的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，但不确定如何测试此功能。我是否需要重新布置类组件内部的操作方式以使其可测试？

弗洛里安·莫托（Florian Motteau）

RTL建议像真实用户一样进行测试，因此您应该根据显示的组件编写测试：

更改输入值
点击按钮
测试标签中是否存在请求的消息
用不同的输入编写其他类似的测试，以涵盖所有情况。

因此，好消息是您不需要对组件进行任何更改，单元测试应与内部实现脱钩。实现可能会改变，而不必重写所有测试。

见这个问题关于这一主题的一些阐述。

您的测试可能类似于：

describe('fizzbuzz', () => {
  let rtl: RenderResult;

  beforeEach(() => {
    rtl = render(<Fizzbuzz />);
  });

  test('prints correct tokens for 16', () => {
    // I assume that the input has a label which is "label for input"
    // I order to test like a real user you should grab DOM elements with visual properties/texts
    // and avoid things like CSS selectors. data-testid attribute should be the last option to use
    fireEvent.change(rtl.getByLabelText('label for input'), { target: { value: '16' } });

    // ...but you can still use querySelector/querySelectorAll
    fireEvent.click(rtl.container.querySelector('button'));

    // check that what should be returned by the function is present in the document
    expect(rtl.getByText('0 1 2 fizz 4 buzz fizz 7 8 fizz 10 11 fizz 13 14 fizzbuzz 16')).toBeTruthy();
  });

  test('prints correct tokens for various other cases', () => {
    fireEvent.change(rtl.getByLabelText('label for input'), { target: { value: '4' } });
    fireEvent.click(rtl.container.querySelector('button'));
    expect(rtl.getByText('0 1 2 fizz 4')).toBeTruthy();

    fireEvent.change(rtl.getByLabelText('label for input'), { target: { value: '7' } });
    fireEvent.click(rtl.container.querySelector('button'));
    expect(rtl.getByText('0 1 2 fizz 4 buzz fizz 7')).toBeTruthy();

    fireEvent.change(rtl.getByLabelText('label for input'), { target: { value: '0' } });
    fireEvent.click(rtl.container.querySelector('button'));
    expect(rtl.getByText('0')).toBeTruthy();
  });

  test('behaves correctly with negative input', () => {
    fireEvent.change(rtl.getByLabelText('label for input'), { target: { value: '-7' } });
    fireEvent.click(rtl.container.querySelector('button'));
    expect(rtl.container.querySelector('label').textContent).toEqual('');
  });

  // add more if you feel that some cases are not covered
  // BTW the above tests should give you a 100% test coverage
  // This should not be a goal (you can get 100% test coverage passing for wrong code),
  // but it is still a good indicator.
  // https://jestjs.io/docs/en/cli.html#--coverageboolean
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。