为 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来测试发送的数据类型。建立保护措施始终是一个好主意。