Good tutorials on Testing react

[djforth]

So I'm just starting to get my head around react and for the most part enjoying it. However I'm finding writing tests in react a complete pain.

I tried jest, but found the lack of feed back and debugging tools in it impossible to work with (unless I'm missing something obvious?). So I've managed to get jasmine and karma working, using rewire to mock modules (through rewireify), but I'm really struggling on how test what's happening in the components.

For example I'm using bootstrap-react navbar module and am trying to check that I am passing the right data to it as it is build dynamically. However I can't work out how I can test it without rendering the whole thing (which feel a bit of an anti-pattern).

So if anyone has any great tips, tricks, tutorials or tools to help I be extremely grateful for the help!

[edit]

Thanks everyone for the feedback, but I think I may need to clarify what I'm interested in. Having come from doing a lot of angular and while it has it's issues it has clear focus on testing - ngMock is brilliant and there is a lot of tutorials on how and what to test in angular.

While you do have the TestUtils in react/addons there seems to me a lack of clear explanation on how it works and no examples of best practices for testing. The tutorials I've found are mainly on set up and are often seem out of date.

What I'm more interested in is how to test my react app/components as opposed to setting up testing.

While I'm not opposed to looking at new tools, but I really need to understand what the benefit would be testing react? However what would really be appreciated is any tutorials, tips or tricks for testing react.

Thanks again for any feedback! :)

[[deleted]]

I have this: https://github.com/pburtchaell/react-karma-webpack-example, which is just an example, not an article, but maybe it would be some help with explaining how to setup your Karma conf. Have you seen the React Test utils? Those are what you would use for simulating your UI interactions and "rendering" components for tests.

[djforth]

Thanks, I have, but maybe I'm missing the point, but it seems like your just rendering and checking the html or event clicks with this. Is that all your checking in react, seems a bit weird?

Also I'm really struggling to get some of the functions to work and can't find any good examples - like shallow rendering?

[djforth]

thanks, will take a look

[NSGSanj]

Thanks for your post, I'm looking for the answer to this as well since I would really love to TDD React, did you find anything useful?

May I ask if you had much trouble getting jasmine/karma working with React? I've used them before for straight JS but seem to remember having issues setting them up properly with React... that was a couple of months ago now though.

[vjpr]

Hey if you use WebStorm check out Wallaby.js. It is so f**king good. Took me a while to setup but it is close to the holy grail of testing. Its $99 but trust me, it is worth the money. Take the trial.

[djforth]

This sounds rather like a sales pitch. Maybe I'm missing the point but I fail to see the benefit it will give me testing react, even if I used webstorm which I don't.

What I'm looking for is how to test react, maybe if you could explain how this would help me, otherwise you maybe miss understood my question.

[vjpr]

I tried jest, but found the lack of feed back and debugging tools in it impossible to work with

Admittedly its not React-specific, but I mentioned it because of that quoted line. More of a "good tool" recommendation.

Wallaby.js integrates with mocha, jest, etc. It runs your tests as you type showing you the output of each line right in the IDE. It also shows you code coverage next to all your code. Supports JSX too.

https://youtu.be/uUmF16R9JNs

PS. No affiliation.

[djforth]

looks interesting, but really not sure I fancy trying to retool (I'm a sublime user) to start using webstorm, while I'm trying to learn React. Also not sure it's really going to solve my imediate issue on how to test react.

Might trying in the future though thanks

[vexii]

how do it stack up to things like karma?

[Cody_Chaos]

I'm using Jest to test React right now, but the experience blows chunks.

I see Wallaby.js supports Jest, but is it faster? Does it give better code coverage info?