Maneira correta de escrever testes para React

Então, eu simplesmente tropecei nesse assunto. Gostaria de perguntar sobre a melhor forma de resolver esse problema. Esta é uma parte relevante do meu App.jscódigo:

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 teste

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 código:

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>
    );
}

// Somente para referência. Foi assim que resolvi o problema

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

E aqui está meu teste:

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);
            }
        );
    }
)

Em primeiro lugar, estou aprendendo os testes de unidade e TDD, então, por favor, seja gentil com minha estupidez.

Agora, para o meu problema. Eu estava testando meu código da maneira vista acima. Assim, adicionando o valor correto e colocando-o no estado, e comparando. O AddTaskConfirmBtn estava apenas verificando se o método foi chamado.

Mas acabei de perceber que há um erro que não considerei em meus testes. Eu estava colocando a coisa errada no array (acredito que era o objeto de evento que eu estava colocando no estado). Consertei, mas o interessante é que os testes não pegaram. Obviamente porque não os escrevi dessa forma.

Portanto, minha pergunta é: devo me preocupar com isso? Devo levar em conta situações como essa em meus testes? Ou é apenas algo que acontece? Ou talvez eu deva colocar salvaguardas no próprio método? Gostar

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});
};

Como deve ser feito da melhor maneira possível?