Question

我有以下React组件，我试图通过模拟输入到id = componentCount的输入字段来测试。我不到一周前第一次开始使用React，所以这个框架对我来说是非常新的，任何帮助都会受到赞赏。我也使用Semantic UI React作为CSS框架，因此Form.Group和Form.Input标签

export class SoftwareForm extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        componentCount: 0
    };

    this.handleInputChange = this.handleInputChange.bind(this);
}

handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
        [name]: value
    });
}

render() {
    return (
        <Form id='softwareForm'>
            <Form.Group>
                <Form.Input label='Name' placeholder='Component Name' id='componentName' type='text'/>
                <Form.Input label='Description' placeholder='Component Description' id='componentDescription' type='text'/>
                <Form.Input name='componentCount'
                            label='Count'
                            placeholder='Count'
                            id='componentCount'
                            type='number'
                            min='0'
                            value={this.state.componentCount}
                            onChange={this.handleInputChange}/>
            </Form.Group>
        </Form>
    );
}

}

测试脚本

describe('<SoftwareForm />', () => {
    it('Count field accepts text input', () => {
        const softwareFormComponent = mount(<SoftwareForm />);
        const countField = softwareFormComponent.find('#componentCount');
        countField.simulate('change', {target: {value: 3}});
        expect(softwareFormComponent.state('componentCount')).toBe(3);
    });
});

上面的测试脚本使用mount进行完全呈现，但是我得到以下错误，＆＃34;方法“simulate”仅用于在单个节点上运行。 4找到了。＆＃34;

如果我使用浅层安装，则测试输出如下

Expected value to be (using ===):
  3
Received:
  0

这告诉我模拟方法没有按预期工作。

几个问题：

在这种情况下可以使用浅渲染，因为我可以使用find方法搜索带有＆＃39; componentCount＆＃39;的元素。 id属性或是一个完整的渲染，必须使用mount，因为我试图操作一个输入元素，它是Form.Group的子元素？
无论问题1的答案是什么，当使用mount时，返回的包装器包含4个节点 - 这4个节点是什么，如果实际上是完全渲染，我应该调用哪个节点模拟在这种情况下需要？由于没有清楚地理解浅层或装载返回的包装器对象的结构，我感到很挣扎。
测试脚本中最后两个语句的想法是模拟输入字段中数字值的更改，让onChange事件处理程序触发componentCount状态值的更新，然后执行使用assert语句进行比较。这是正确的做法吗？

Answer 1

试着回答你的问题：

您可以使用mount，它可以在完整的DOM渲染上创建测试，它非常适用于您拥有可能与DOM API交互的组件的情况，或者可能需要整个生命周期才能完全测试组件
您可以看到使用.debug()返回查找。

Answer 2

经过几次尝试后，我才能让测试工作。

在这种情况下，即使我正在与输入DOM元素进行交互，浅层安装也足够了。
测试脚本中使用的模拟方法更改为以下内容， “countField.simulate（ '变更'，{ target：{name：“componentCount”，value：3}}）;

测试React组件 - mount vs shallow和模拟事件

2 个答案: