Unit testing React and Meteor

I just updated my kickstart project to have unit test for React.js components. It works great and it is fast as hell.

Now I want to add unit tests for the Meteor stuff. Mainly, testing the Meteor methods and the Meteor subscriptions. However, I can’t get an example of a unit test that makes sense.

I’ve seen a ton of Velocity tests that look garbage to me (sorry). They all look if the filter has the expected value. However, this is not a proper test. I want to be able to set mock data (or temp db), call the Meteor function or subscription and look if the output is the expected values. I clearly don’t want to do something like this:

expect(Players.find.calls.argsFor(0)).toEqual([{}, {sort: {score: -1, name: 1}}]);

(this is an official example from Velocity)

Where can I look for great examples of unit testing with Meteor specific stuff?

Some examples might look like garbage, others might not. It has nothing to do with Velocity, it has to do with the example. The example you found is a very basic one that relates to the leaderboard app which everyone knows.

You can do some seriously advanced stuff with related to unit / integration testing with Velocity + Jasmine. You might find this repo useful, I literally just released it.

In particular, you might want to see this example.

It’s only the start of many more examples to come, now that I’ve resumed writing the book. Another source (that will soon change a lot) is Letterpress. There you can see the fixture package pattern in use.

I hope the above helps.

On an another note, it looks like you really know what you’re doing from your kickstart project, and I think you could easily write a Velocity-React framework that would be fast as hell that would run in realtime, rather than requiring the use of npm test. It may not be obvious, but you can create frameworks in Velocity that do not use mirrors. This means they would just be a simple process and therefore ultra quick. Wouldn’t be nice to get realtime feedback on every save? :wink:

3 Likes

Hey @sam

Thank you for your response. This unit test was exactly what I was looking for. I was very surprised to see very few people in the Meteor community are fully unit testing outside packages.

The unit tests I make on React components are with karma/webpack. Because they are not packaged inside Meteor when I am developing (I don’t want my app to reload, webpack hot reload is way better), I don’t think there is a way to have my tests inside the Meteor folders. With the simple karma start command, you can have your unit tests running while your develop too.

However, the integration tests for the server with Velocity seems awesome. I’ll certainly dig more into that :smile:.

1 Like

You’re welcome

I think it’s because the all-packages app structure has become popular due to the modularity it brings, which in turn provides good code isolation. With the core-package pattern, I think the same code-isolation is possible, and in my opinion it creates clearer intent than the package-only approach.

Regarding server mode testing. If you use the unit testing mode in Jasmine, it’s almost instant. Something worth considering.

Have you seen Wallaby? Jest is what Facebook use to test React and here’s a Jest + Wallaby example. We use Wallaby + Jest for developing Chimp and it’s insanely quick and useful.

I would be more than happy to put all my tests on Meteor, believe me. However, it is just impossible to import the React component because it doesn’t exist inside Meteor. I can’t change that because of the hot-reload Webpack provides.

I’ve been using Jest before. The truth is if you’re using webpack, Jest is slow. However, if you keep your karma browser open, it is much faster. I’ve never used Wallaby though. I’m not sure if it is really that useful.

Nice topic, thanks for sharing this with us.

And testing is unfortunately something that is in our domain most of the time left aside by too many programmers…