Run tests effortlessly in Node.js and browsers with Meteor.

Testing tools like Jest run our tests in Node.js with a fake set of browser APIs. This is not idea because we can't guarantee that our code runs properly in real browser with real browser APIs.

Fake APIs are often missing features, for example certain CSS and WebGL APIs. When this happens, we feel out of luck.

Enter Meteor!

You don't need to be making a Meteor app to use Meteor as a tool for running tests; more details below.

Here's how to run tests in Node.js and browsers, so that test code runs against real APIs and we can be more confident that our code runs in our target environments.

Create a new Node.js/JavaScript/HTML/CSS-powered Meteor app, then run tests both on the serverside and clientside.

First, set up a new Meteor.js app:

meteor create my-app
cd my-app
npm install

This sets up a simple default Meteor web app with a button that increments a counter when we click it. Follow the Meteor tutorials to learn more on what we can do with Meteor.

In this new Meteor app see the tests/main.js file for an example of test code that uses Mocha's decribe and it syntax for describing test cases.

Let's run tests!

Now that we have a Meteor app set up, run tests in Node.js (serverside):

npm test

To run client-side tests in a browser (clientside), run

npm run test-app

and then point a browser to http://localhost:3000. It's that simple!

And the best part?

When we run npm run test-app, the tests and the app run in watch mode. Any time we modify code and save, tests automatically re-run both on the serverside and the clientside.

The browser automatically refreshes and re-runs the clientside tests, which leads to an awesome developer experience!

Tip: The CSS for the clientside test output can be configured in order to place the output anywhere in the viewport to make development more convenient.

Continuous integration? No problem!

We can automate our JavaScript/HTML/CSS tests in Node.js and browser environments with ease!

In continuous integration environments, just use the TEST_BROWSER_DRIVER env variable to specify a browser for the test runner to use headlessly! More details on how to run tests in each browser.

Test anything with Meteor

Here's an idea!

Even if we aren't making a Meteor application, we can simply make an empty Meteor app configuration in our project (f.e. an Express.js app with custom UI), and use Meteor to run our non-Meteor tests!

I'll leave this as an exercise for anyone reading, but feel free to ask any questions.

And that's it! As simple as that!

Comments

[Rainyel Ramos]

Thanks for this. This is a quick solution to the problem of develop a portion of an app, in Node.js, that will be executed in the browser. I was reading about github.com/tom-sherman/blog/blob/m... , but definitely this is more easy.