Testing For React + Meteor 1.3+

testing
21

Make sure that you use Node.js 4 with NPM 2. NPM 3 will not work.

nvm install 4
nvm use 4
nvm alias default 4
rm -rf node_modules
npm install

After that if it still doesn’t work, find out from what package the uniqueSort property is and tell Jest to not automock it, either by using jest.dontMock in your test files or globally via: https://github.com/xolvio/automated-testing-best-practices/blob/experiment/just-jest/package.json#L26-L33.

22

@Sanjo

Got this setup to work, although it does require some config to adapt to any project. Really useful though. Here are the steps I took to configure to my project, in case anyone else wants to follow this route.

  1. Add jest config and devDependencies in package.json - this was pretty straightforward, though I had to upgrade React to ^0.14.7
  2. Add a .scripts/setup-jest-tests.js file as in the example repo above, but change the directories as appropriate. In my case, instead of src and imports, it was simply client, modules.
  3. Add the babel.rc file
  4. as described above, update nvm and reinstall node_modules
  5. Not sure about the wallaby.js file, so I just included that too, while changing the directories as described above (src, imports, to client, modules)
  6. added a tests directory, and put the __mocks__ file with the meteor.js stub inside. Also referenced this in the setup-jest-tests.js and wallaby.js files.

Now it works great! I can test simple components and functions. I still have to figure how to stub some of the Meteor - specific objects, such as Session, ReactMeteorData, etc. But at least it’s a start!

23

Thanks for documenting your steps. I will try to make this easier until the Meteor 1.3 release.

The wallaby.js is only needed when you run Jest with Wallaby. I can highly recommend to use Wallaby, because it results in an even faster and tighter feeback loop -> saves you time -> is worth the money.

For mocking Meteor stuff I think the mocks are now placed in __mocks__/meteor/session.js for example for Session, when you use import {Session} from 'meteor/session'. Not sure if that works.

Regarding ReactMeteorData, you can separate your React components from it via data container. Then all the data is passed via this.props. See https://github.com/meteor/react-packages/issues/169.

1 Like
24

Hey @sanjo, is there something special I have to do to test stateless functional components? I’m getting an TypeError: Component is not a function error on using the enzyme tests with these… Loving enzyme everywhere else though!

25

I don’t know. You can ask them :wink:

1 Like
26

What did this .babelrc file look like? My app is crashing when I have the babelrc file in it.