Lessons learned testing React & Redux apps with Jest and Enzyme

Lessons learned #testing #reactjs  & #Redux #apps with #Jest and #Enzyme  #javascript

  • It makes things much easier, and you can pattern match (hit p then type part of your file/folder name) to make sure you’re not running a ton of things every save.Make sure you don’t close off your test() statements early.Parentheses man… 😢Is perfectly valid Javascript, but your test (while it…
  • I only noticed that I had this copy and pasted for one section of my unit tests when I made an error and realized the test didn’t fail.Which leads me to…Make sure your tests failIf you’re awesome and use TDD, then props to you you’re already doing this 🎉For the rest…
  • Time to move on.”However this leads to errors like the aforementioned one, and it’s surprisingly easy to grab and test the wrong element or mocked function — especially if you’re copy pasting from a similar test.It’s not hard to just comment out an essential section of a test and make sure it…
  • It’s also easy to copy to another component with a similar need for testing.In fact all of the little conventions I’m following here (beforeEach mounting a wrapper, what I name things, spreading a props object) are great to have defined somewhere so people can easily understand and copy test functionality…
  • It also makes testing quite simple and separates rendering vs data concernsI try to extract any complex data manipulation to pure functions and test thoseI use end to end (Selenium) and integration tests to check on sections of my app to make sure it all fits together.It’s not perfect, I’m…

If you don’t work at a primarily tech company, it can be a bit difficult to convince managers of the importance of things like unit testing. After being a enthusiastic supporter for quite a while, I…

Lessons learned testing React Redux apps with Jest and Enzyme(Re)Ducks! Pixabay image, released under Creative Commons CC0If you don’t work at a primarily tech company, it can be a bit difficult to convince managers of the importance of things like unit testing. After being a enthusiastic supporter for quite a while, I got the go ahead on a few projects to set up unit tests and try to establish some patterns for my coworkers. Here are some things I’ve learned throughout the process.Setup is likely non-trivial 😐If you’re using something like create-react-app or your company has jest and enzyme set up already then awesome! You get a 🎉If you’re starting from scratch like me then there are a few things you should know:Jest runs node, and it runs on your raw file code. Not whatever webpack/etc bundles for you. This means that if you want to use ES6/etc, better declare a test .babelrc setup.Jest uses node’s conventions, not the browser’s, so you may need to add polyfills for things like importing/exportingThe latest enzyme requires a setup file that jest needs to know about.You’ll need to have a bunch of mocks for things like fonts/image/styling filesIf you want to run tests in CI you’ll probably want a testResultsProcessor and will likely have to pass — runInBand to Jest (I had to for Bamboo)The biggest hurdle for me usually is getting the right polyfills so I can write my tests the same way I write my components (ES2017, import/export, etc). Upgrading to React16 was also a bit…

Lessons learned testing React & Redux apps with Jest and Enzyme