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 ponent 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

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 ponent 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

• javascript
• testing
• jestjs
• enzyme
• snapshot

• This is exactly how I feel about 99% of testing tutorials I see on the web - they test nothing. Except for that javascript works like it should (let value = 1; assert(value === 1)), processor works like it should (endless calculator a+b tests), laws of physics still work (render div, assert div was rendered). I wish there was more real life testing tutorials with solutions to real problems. – andree Commented Sep 20, 2018 at 14:52
• It's not just an impression, most tests are in fact useless. – 6infinity8 Commented Oct 7, 2022 at 12:21

2 Answers 2

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 mon ponent/service/utility and don't notice it affects some unexpected ponent for example.

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

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 ponent. It doesn't actually tests anything.

What you can do is to set state on a ponent 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 ponent and make a snapshot, then, when you work on services and utilities this ponent uses, you can make sure it doesn't breaks for that certain state.

I know this is very late, but yes I think Enzyme overall has very little value to provide. Tests, in general, only provide value if written and are applicable before the code has been written or modified. The whole point behind writing a test is to simulate usage and that assert that the interaction will be as expect. This is what Test Driven Development is all about.

When it es to Enzyme, TDD is not possible. This is because you are asserting implementation details. As for the its snapshot tool, you pretty much nailed why its useless. Its literally just trying to tell you "whoop something changed", which you can clearly see from a git diff in a PR anyways. Hope this helps shed some light to whomever is reading.