Question

我有一个带有输入元素和按钮元素的React Component（Comp）。我写了一个测试来验证是否正确解析了空输入。

问题：

1）输入的值分配为“”（输入具有onChange={ e => this.setState({ inputValue: e.target.value }) }）

2）fireEvent.click(container.querySelector('#calculateButton'))被称为

^ note：按钮具有onClick={e => this.onCalculateButtonClick(e)}，可从状态获取inputValue

3）userInput.split(',')在onCalculateButtonClick内部被调用

4）引发异常： TypeError：userInput.split不是函数，因为userInput为0（一个数字）。

我能解释这一点的唯一方法是，如果将fireEvent.click以某种方式重置为默认状态（inputValue：0）

代码如下：

class Comp extends React.Component {
    constructor() {
        super();
        this.state = {
            inputValue: 0,
            calculationResult: '',
        };
    }
    onCalculateButtonClick = function(event) {
        const userInput = this.state.inputValue; // this is 0 after fireEvent.click is called
        const tokenizedInput = userInput.split(',').map(element => { // exception thrown here
    ...
    }
    render() {
        return (
            <div className="Comp">
    ...
                        <input
                            id="userInput"
                            type="text"
                            onChange={ e => this.setState({ inputValue: e.target.value }) }
                        />
    ...
                    <button
                        id="calculateButton"
                        onClick={e => this.onCalculateButtonClick(e)}
                    >
                        Calculate
                    </button>
    }
}

测试（开玩笑）：

test('empty input returns 0', () => {
    const { container } = render(<Calculator />);
    const inputElement = container.querySelector('#userInput');
    fireEvent.change(inputElement, { target: { value: '' } }); // after this line, inputElement is ''
    fireEvent.click(container.querySelector('#calculateButton')); // throws exception here from inputElement being 0??
    const outputElement = container.querySelector('#calculationResult');
    expect(outputElement.innerHTML).toBe('0');
});

我不知道为什么fireEvent.change会导致我的状态的inputValue属性为0-很想了解这里发生的事情。力求尽可能清晰，让我知道是否还有不清楚的地方。谢谢！

@ testing-library / react中的fireEvent.click是否有可能用其初始状态重新渲染该组件？

0 个答案: