为 React 编写测试的正确方法

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 只是检查该方法是否被调用。

但我刚刚意识到我的测试中没有考虑到一个错误。我将错误的东西推入数组（我相信这是我推入状态的事件对象）。我修复了它，但有趣的是测试没有发现它。显然是因为我不是这样写的。

所以我的问题是，我应该担心吗？我应该在测试中考虑这样的情况吗？或者这只是发生的事情？或者我应该在方法本身中加入保护措施？喜欢

Answer 1

我会说一般的好做法是处理组件内部的所有场景，而不是其他组件将发送的内容。例如，在您的情况下，最好测试正在发送的对象类型。因此，您可以使用函数 liketoHaveBeenCalledWith来测试发送的数据类型。建立保护措施始终是一个好主意。