Question

所以我只是在这个问题上遇到了麻烦。我想问一下解决这个问题的最佳方法。这是我的App.js代码的相关部分：

addTask = (text) => {
    const {tasks} = this.state;
    tasks.push({text});
    this.setState({tasks});
};

<AddTaskConfirmBtn
    text={
        this.state.newTaskValue // This is just a simple state string
    }
    addTask={
        this.addTask
    }/>

AddTask测试

it('should addTask', function () {
    wrapper
        .instance()
        .addTask('testing');
    expect(
        wrapper
            .state('tasks')
    ).toEqual([
        {text: 'make todo with hooks'},
        {text: 'write tests'},
        {text: 'do the daily'},
        {text: 'testing'},
    ])
});

AddTaskConfirmBtn代码：

render() {
    return (
        <button
            onClick={
                    this.props
                        .addTask // This is the issue. This adds an object to the array. It is solved below
            }>
            Add task
        </button>
    );
}

//仅供参考。这就是我解决问题的方式

render() {
    return (
        <button
            onClick={
                () => {
                    this.props
                        .addTask(this.props.text)
                }
            }>
            Add task
        </button>
    );
}

这是我的测试：

describe('<AddTaskConfirmBtn/>',
    function () {
        let wrapper;
        let addTaskMock = jest.fn();
        beforeEach(
            function () {
                wrapper = shallow(
                    <AddTaskConfirmBtn addTask={addTaskMock}/>
                );
            }
        );
        it('should addTaskToTasks onClick',
            function () {
                wrapper
                    .find('button')
                    .simulate('click');
                expect(addTaskMock).toHaveBeenCalledTimes(1);
            }
        );
    }
)

首先，我正在学习单元测试和TDD，因此请对我的愚蠢态度保持谦虚。

现在是我的问题。我正在按照上面的方式测试我的代码。因此，添加正确的值并将其推入状态，然后进行比较。 AddTaskConfirmBtn只是检查是否调用了该方法。

但是我只是意识到我的测试没有解决一个错误。我将错误的东西推入了数组（我相信这是我正在推入状态的事件对象）。我修复了它，但是有趣的是测试没有抓住它。显然是因为我不是这样写的。

所以我的问题是，我应该担心吗？我应该在测试中考虑类似情况吗？还是只是发生了什么事？还是我应该在方法本身中添加防护措施？喜欢

addTask = (text) => {
    if (typeof text !== "string") {
        console.log("text is not a string", text);
        return null;
    }
    const {tasks} = this.state;
    tasks.push({text});
    this.setState({tasks});
};

应如何以最好的方式完成？

Answer 1

我会说一般的好习惯是处理组件内部的所有场景，而不是其他组件将发送的内容。例如，在您的情况下，最好测试发送哪种类型的对象。

因此，您可以使用类似toHaveBeenCalledWith的函数来测试发送哪种类型的数据。建立保障措施总是一个好主意。

正确编写React测试的方式

1 个答案: