神刀安全网

React Unit Testing with Mocha and Enzyme

A step-by-step tutorial for UI testing in Meteor.

This is a short tutorial to help you test your React UI components. It presents a simple UI testing pattern I contributed to the Meteor Guide ( :gift: ) and Todos sample app ( :gift: ).

You should read this if you:

  1. Are using React to develop your apps
  2. Want an easy way to automatically test your UI
  3. 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:

React Unit Testing with Mocha and Enzyme

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:

React Unit Testing with Mocha and Enzyme

Because the tests run so quickly, you can run them every time you check in code or even every time you edit a file .

Having a full test suite gives you piece of mind that your code is always working as you expect it to.

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » React Unit Testing with Mocha and Enzyme

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址