Understanding brittle and non-brittle tests in react

Santosh G — Sat, 06 Jul 2019 13:37:53 +0000

Brittle tests test the implementation of the logic, while the non-brittle tests test the functionality. In the context of React, brittle tests usually test the change of state, or spy on some function to check if it is called.

Let us see the code to understand the brittle and non-brittle tests in React application.

class App extends Component{
    state = {
        no: 0
    }

    incrementNo = () => {
        const { no } = this.state;
        this.setState({
            no: no+1
        })
    }

    render(){
        const { no } = this.state;
        return(
            <div>
                <div data-testid="no">
                    {no}
                </div>
                <button data-testid="increment-button" onClick={this.incrementNo}>
                    Increment Number
                </button>
            </div>
        )
    }
}

Brittle test for the above React component

it('should increment no - implementation test', () => {
    const wrapper = shallow(<App />);
    wrapper.instance().incrementNo();
    expect(wrapper.state('no')).toEqual(1);
})

Non-brittle test for the above React component

it('should increment number - functionality test', () => {
    const wrapper = shallow(<Brittle />);
    expect(wrapper.find('[data-testid="increment-no"]').text()).toEqual('0')
    wrapper.find('[data-testid="increment-button"]').simulate('click');
    expect(wrapper.find('[data-testid="increment-no"]').text()).toEqual('1')
})

Libraries supporting non-brittle tests

There are many libraries that allow you to write tests in React. Some of the popular ones are Enzyme and React Testing Library.
The Enzyme library provides many APIs, which allow you to write tests the way you want. But React Testing Library forces you to write non-brittle tests. Want to know more? I wrote another blog about differences between Enzyme and React testing library

DEV Community: Santosh G

Understanding brittle and non-brittle tests in react

Libraries supporting non-brittle tests