Question

我正在努力寻找一个清晰的解释，说明如何使用笑话来测试类的react组件。我想将单元测试添加到创建表单的onSubmit函数中。

handleCreateHouse(e) {
        store.dispatch(createHouseDraft(this.state.house)).then(() => {
            if (!this.props.creation_error) {
                if (this.props.house.id) {
                    for (let key in this.floors) {
                        if (this.floors[key]) {
                            store.dispatch(createFloorDraft({ 'name': this.floors[key], 'house_id': this.props.house.id }))
                                .catch(err => console.log(err));
                        }
                    }
                }
            } else {
                switch (this.props.creation_error.code) {
                    case "duplicated_rif": {
                        this.setState({
                            ...this.state,
                            errors: {
                                ...this.state.errors,
                                ref: true
                            }
                        })
                    }
                }
            }
        }).then(() => store.dispatch(fetchHouseDraftList(this.state)))
        .then(() => this.props.onAddHouse())
        .catch(err => console.log(err));
    }

Answer 1

由于这个问题是一个非常广泛的问题，所以我对围绕组件进行神秘化和测试的一个非常笼统的想法持怀疑态度。 React类组件是最基本的普通JavaScript类。因此，例如，您可以像测试一个类一样对其进行测试：

my_table.id <> sq.max_id

我不建议您这样做，尽管由于大多数测试最终都需要进行大量的模拟设置，因此可能没有用。更多维护策略可能是：

使用测试组件渲染器，例如enzyme或react-testing-library。可能还有很多其他的，所以我把研究交给你了。

这些模块提供了一种实例化组件的方法，并提供了一个类似于该组件的API，该API类似于常规DOM的功能。因此，您可以触发状态更改，或单击某个元素，检查是否调用了各种模拟，甚至可以验证状态更改。

尝试将回调包含尽可能多的“无状态”代码：在您提供的示例中，如果忽略了class MyComponent extends React.Component { handleCreateHouse(event) { this.setState({ clicked: true }); } } const component = new MyComponent(); const setStateMock = jest.fn(); component.setState = setStateMock; component.handleCreateHouse(); expect(setStateMock).toHaveBeenCalled();访问/设置程序，则大多数代码都是可以在没有实际测试的情况下进行测试的逻辑设置组件线束。然后，这类似于我上面显示的示例。

this.state可能会引起另一个混乱的领域。这似乎是一个魔术对象，可以在函数的上下文中使用。目前尚不清楚对象来自何处，我的猜测是，存储是在托管组件的同一文件中创建的，我认为这有点不传统。在这种情况下，您可以选择使用store来模拟商店实现（但仍重复使用应用程序中的操作）；该库用于redux docs

开玩笑地测试React类组件

1 个答案: