Testing For React + Meteor 1.3+

testing
1

I wish to now get in the habit of writing tests before writing the actual component. I hope it will be fun. Bear in mind it will be my first so I’m like a blind man walking by myself.

Few blog posts mentioned the word “Jest” so I googled. I have then found this. I want one for React so I followed this. All I did was npm install jest-cli --save-dev but got an error in my browser console:

Uncaught ReferenceError: jest is not defined

This is referencing to jest.dontMock('../CheckboxWithLabel');

Can someone recommended a starting point? OR…a test for both Meteor and React since React will have Meteor code? Thanks!

1 Like
2

Hi, I can recommend you to use Wallaby with Jasmine. You can try it by installing Wallaby, downloading https://github.com/xolvio/automated-testing-best-practices (wip_migrate_1.3 branch) and starting Wallaby with the wallaby_client.js config.

There is only one test right now: https://github.com/xolvio/automated-testing-best-practices/blob/wip/migrate_1.3/tests/components/ui/account-summary-spec.jsx. You can put your test files also somewhere in the imports folder.

Jest is based on Jasmine. The major differences are that Jest has a mechanism to mock required files. In Jasmine you can do this with spyOn. Jest also runs in node.js, Jasmine runs in a browser for client tests.

1 Like
3

Wallaby is paid for so that’s a non-starter for us unfortunately. :frowning:

What’s the best free tool to unit test React components?

1 Like
4

In the repository is also a karma.conf.js for the Karma Test Runner. You can start it with ./node_modules/.bin/karma start karma.conf.js.

5

I just pushed a fix btw. :wink:

To answer your question. I think the best free tools for client side unit testing are:

  • Karma Test Runner + Jasmine or Mocha
  • or Jest

The best paid tool is:

  • Wallaby + Jasmine or Mocha or Jest

I personally like the spyOn API from Jasmine very much and don’t like the Jest API for doing the same things. That’s why I prefer Jasmine over Jest.

6

Did anyone miss that the question was how to run a super simple Jest test in Meteor? Nobody seemed to even address that. This is something I would like to know as well. @sashko, any thoughts? We should be able to run the simple Jest React example, shouldn’t we? Yet, when I install Jest through NPM create tests directory, and within that, a __tests__ directory, with a test.js, and copy the example, I get a unexpected reserve word error from the console. I assume this is due to a clash with Meteor somehow, or else why would the example word for word cause a clash. If you could weigh in here and clear this up it would be really useful. Thank you!

Also, didn’t realize that putting a __tests__ folder in my tests folder would cause my whole app to crash. Could not find module 'warning' - Oh, the agony!

7

I don’t think the question was ever how to run a test with a specific framework, but I’m sure that you can easily run Jest from the command line and have it work fine. Can you post an example of an app where this breaks?

1 Like
8

Also, keep in mind that this is an early beta, and it’s a while until the release. There is time to make lots of small tweaks and fixes, and what’s why we wanted to make it available as soon as possible.

1 Like
9

You need to configure Jest properly. 1. Use the script preprocessor Babel jest. 2. Tell Jest to look for tests in the tests directory instead of __tests__. You find the documentation for these options on the jest API reference.

1 Like
10

I have two questions really. One for Jest and the other for both React and Meteor. Since FB uses Jest then I would if you could use it with React and Meteor.

1 Like
11

Hi @sashko, I’ll try to construct a sample repo and share it with what I’m doing - currently this is a production app for our company so I can’t share it outright. Sorry for the vented frustration, it’s just that my company is putting more stress on testing and it’s difficult when there aren’t a whole lot of examples online of testing React with Meteor. I appreciate all the work you guys are doing and there’s been a ton of progress.

1 Like
12

I have created a working example of using Jest to test a react component: https://github.com/xolvio/automated-testing-best-practices/tree/experiment/just-jest. You run the tests with npm run test-unit-watch. It requires Node.js 4.

It has the limitation that you need to create mocks for all Meteor dependencies (including all Meteor packages). In my example I have just mocked Meteor.Error.

In the branch https://github.com/xolvio/automated-testing-best-practices/tree/wip/migrate_1.3 there is an example of using Jasmine that runs in the full Meteor context. So it does not have the limitation with the Meteor packages.

1 Like
13

Hi @Sanjo, first of all, awesome job! I just skimmed through the repo, and it looks like a lot of stuff. However, I couldn’t find an example like the one quoted at the top, where you use jest as in the doc example to test an actual component - TestUtils.renderIntoDocument, etc.

Did I miss that? I know there’s a lot of cool stuff in your repo, but this is the first step I need to get some clarity on how to setup testing going forward.

Thank you!

1 Like
14

The example is located here: https://github.com/xolvio/automated-testing-best-practices/blob/experiment/just-jest/src/imports/client/components/account-summary.tests.jsx. It uses https://github.com/airbnb/enzyme/blob/master/README.

1 Like
15

Interesting! Using Jest and creating official mocks for Meteor core stuff is something we should look into for future Meteor releases. Once we get people using modules everywhere after 1.3, it will be much, much easier to adopt these popular tools. @tmeasday we should take a look at Jest in depth sometime!

6 Likes
16

I will send you flowers if you do this!

6 Likes
17

I’ll reach out for your advice on how to do this properly for the new data project! We’re planning on making it tested and testable from the start!

6 Likes
18

Hi @Sanjo, so I went through your repo, added the setup-jest-test.js script and updated my package.json. Now jest is reading the test file I put correctly, but still throwing the same error as if it isn’t reading the .jsx syntax. (I tried both .js and .jsx file extensions). Any idea on why this is happening?

1066×242 66.6 KB

19

Make sure you have https://github.com/xolvio/automated-testing-best-practices/blob/experiment/just-jest/.babelrc in your project and the babel plugins installed (via npm install).

20

That seemed to bump me to the next level but now I get this -
TypeError: Cannot read property 'topCompositionEnd' of undefined

I feel like it’s getting close though :slight_smile:

Edit: Oh, it never ends. I went and made sure I had the __mocks__ directory correctly placed, and even checked to see how to fix this error, but now I just get another - Cannot read property 'uniqueSort' of undefined

I’m in real trouble :confused:

Also, this is way more complicated than it should be, right??