Automated Testing Best Practices (React + Chimp + Karma)

testing
1

I’ve started to put together a repository that demonstrates how to do automated testing the way we do it at Xolv.io.

The project uses Meteor, React, Astronomy, Chimp, Karma and Wallaby (optional). It contains all the scripts you need to develop locally and super high speed.

The React unit tests run completely outside of Meteor using Karma. If you also use Wallaby, you get real-time feedback on your actual code! You really should check it out.

Also, rather than just showing you code, I’ve also included some do’s and don’ts documentation and will keep extending this repository to make you awesome at testing!

All feedback welcome and always happy to help!

19 Likes
2

UPDATE - Added Continuous Integration Support

You can now find circle.yml and .travis.yml configuration files that do the following:

  • Run Karma unit tests against the React components in both Firefox and Chrome [SUPER FAST]
  • Start a Meteor app run Jasmine against it for unit tests that require the Meteor context
  • Start a Meteor app then:
    • Run Chimp against it for domain testing [SUPER FAST]
    • Run Chimp against it for critical path testing through the UI (real headless Chrome browser)

Cache Everything!

Both of the configuration files downloaded and cache the following dependencies.

  • Meteor
  • Chimp
  • MongoDB
  • Selenium + ChromeDriver
  • All Meteor packages and dependencies
  • All NPM dependencies
  • Velocity - temporary solution until Meteor 1.3 is released with app-level testing support
  • The actual build

The last point is important. Meteor can take a while to build the first time around, especially if you have a lot of files. To combat this, we also cache the built files on the CI servers. We trust that Meteor will be smart enough to build the differences for new builds, and this speeds up the build considerably and means your build startup times are as fast as they can be. And if you ever have any issues, it’s easy to clear the cache both on Circle and Travis.

Feedback Please

I will keep posting updates to the repository and content on this thread. Let me know your experiences and help shape up this testing template for all to use.

3 Likes
3

Thanks for all the hard work on this, @sam!

1 Like
4

Looks great. Thanks for putting this together!

1 Like
5

Want to use Mocha?

It’s easy, you need to edit 3 files:

  • karma.conf.js to use mocha instead of jasmine in the frameworks section
  • wallaby.js to use mocha instead of jasmine in the testFramework entry
  • .meteor/packages to use mike:mocha instead of sanjo:jasmine

Note that the use of Velocity is a temporary solution until Meteor 1.3 is released with app-level testing support.

1 Like
6

Thanks for sharing your repo. Do you have any best practices for testing packages?

Currently, I’m using velocity and it works, but it is slow. Recently, I’ve been thinking about a karma preprocessor that is able to analyze Package.onUse() and properly preprocess the files (wrapping and exposing global variables).

7

The fastest way to get what you want is to create a new blank test-app for the package. Add your package, sanjo:jasmine, and velocity:html-reporter/velocity:console-reporter to the app and add your tests in tests/jasmine/client/unit/. The client unit mode uses Karma and is quiet fast. You can also look at the implementation. I basically make sure that Karma loads the files in the same way as Meteor does.

8

Ok, thanks. I’ll check it out.