I feel like most component testing with jest and enzyme are valueless, am I wrong?

Question

I’m new to tests with React-Jest-Enzyme, but from all the info I collected about it it seems to me that most of the tests actually tests if the React library breaks, and not my actual business logic.

I’ll give you some examples, and please correct me if I’m wrong:

Snapshot testing:

What’s the deal with this strategy?

From what I see it’s main purpose is to catch any unwanted changes to my code. it “stringify” my component tree, and just noticed if any new line breaks / characters were added, right?

so its mostly being used for those cases I could accidently pressed my keyboard? or someone else accidently mess with my code?

Enzyme’s mount/shallow and Jest’s

Most of the examples I saw explaining the way you use those are something like this:

const wrapper = mount(<MyComponeny />)
expect(wrapper.find(‘button’).simulate(‘click)).toHaveBeenCalledTime(1)

What value do I get out of it? If I simulate a button click with enzyme’s simulate(‘click’), then i should expect it would trigger a click event.

what am I testing here exactly? Enzyme’s functionality?

also the setState method enzyme gives us. if wrapper.setState({value: ‘some value’)} suppose to change my state, why do I see use cases like this:

wrapper.setState({value: ‘new value’)}
expect(wrapper.state(‘value’)).toBe(‘new value’)

?

why do i need to test the testing framework / extra libraries?

it’s all seems a little bit ambiguous

Answer 1

Snapshot testing:

so its mostly being used for those cases I could accidently pressed my keyboard? or someone else accidently mess with my code?

If you tweak a common component/service/utility and don't notice it affects some unexpected component for example.

Now it can affect it in a good way, for example fix an unexpected text in a component- but snapshots gives you the power to quickly see the changes across all affected components.

const wrapper = mount(<MyComponeny />)
expect(wrapper.find(‘button’).simulate(‘click)).toHaveBeenCalledTime(1)

What value do I get out of it?

This is just a simple example. It would of been a really bad test indeed- it doesn't tests anything. Usually you test more important stuff like:

toHaveBeenCalledTime(1) on some sort of process- for example, making sure a network request was only done once during an entire flow of clicks and other triggers.

why do I see use cases like this:

wrapper.setState({value: ‘new value’)}
expect(wrapper.state(‘value’)).toBe(‘new value’)

?

This is also a simple example to show you that you can set state on a React component. It doesn't actually tests anything.

What you can do is to set state on a component and make sure it renders the right amount of children or that it renders some other things you expect.

And this also has to do with snapshots-

Set a certain state on a component and make a snapshot, then, when you work on services and utilities this component uses, you can make sure it doesn't breaks for that certain state.