A step-by-step tutorial for UI testing in Meteor.
You should read this if you:
- Are using React to develop your apps
- Want an easy way to automatically test your UI
- Are using Meteor … or not — most of this will work in any React setup!
Here are the tests we’ll be writing on the left, and the UI components we’ll be testing on the right:
As we step through several tests in detail, you’ll learn the building blocks of React UI testing and best practices for how to structure a test suite. You can apply these patterns to your own apps to catch bugs, write code faster, document code behavior, and make sure things don’t break as you add new features to your app.
The tutorial assumes a basic familiarity with React and ES6 , but does not require much Meteor knowledge. All the source code is available in Meteor’s Todos sample app so you can run it on your own machine and play around with the code.
UI Unit Testing
There are many ways to test your software, but UI unit tests are small isolated tests of individual UI components, rather than full tests of the system. They are (relatively) easy to set up and fast to execute.
Here’s a screen grab of the current suite of Todos unit tests, including both Client (UI) and Server tests. The entire suite runs in just over a second on my laptop:
Having a full test suite gives you piece of mind that your code is always working as you expect it to.