Unit Testing w/ React and 1.3


#1

I’m looking through the Meteor guide in the unit testing section and am a bit stuck as to how to best move forward when using React. There are the Blaze test helpers, but there is nothing in the guide or the React Todos example on github that has unit tests.

Are there any good examples/repos out there that have some unit tests in action. What would be the guides best practice in terms of these unit tests?


#2

Meteor Chef Base is a pretty solid resource:
https://themeteorchef.com/base/


#3

Thanks! I can’t seem to find anything like this or this in there. Is that necessary, or am I ok sticking to the types of tests used in the Base link you sent?


#4

Personally, I find the testing syntax in Base to be clearer, more robust, and what one would use in day-to-day testing of an application. The API syntax is well refined and about as good as one can ask for.

The syntax and methods in the Todo example are… well, experimental isn’t quite the right way to phrase it; but they’re a bit more infrastructural. If you’re developing Blaze components or working with Autoforms and the like, then the Todos tests would be helpful. But if you’re going to be focusing in React, Base should have everything you need to get started.


#5

@rubenpa At the end of the React tutorial you will find short test chapter.
https://www.meteor.com/tutorials/react/testing


#6

Thanks @awatson1978 & @micmac. Much appreciated!


#7

If you want to test the UI, the recommended one from the guide is chimp, but it requires its own node installation separate from meteor.

Unit testing can be done using chai, sinon then executed by mocha via practicalmeteor:mocha xor dispatch:phantom-mocha. Don’t use both packages together at the moment.

You can test ReactJS using Jest which is provided by facebook, but it will only work with ReactJS code and requires it to be run from its own command line at least until 1.3.3 comes out with @benjamn commit https://github.com/meteor/meteor/commit/7c63a8e704e73405eaa32042c997da957891e8b2 that allows for custom babel plugins to be included (where you can incorporate the babel-preset-jest into the babel compiler being used by Meteor.


#8

Not Meteor-specific but @arunoda has a nice setup for React component testing with mocha and enzyme in his “component development kit” along with a bunch of other goodies. Worth checking out:

https://github.com/kadirahq/react-cdk


Meteor 1.3 testing - with "meteor/meteor:x" package imports
#9

Someone should send us a PR of some unit tests with enzyme on the react branch to help future people. I think @ffxsam has gotten stuff working before?


#10

@tmeasday: Still working it out, but nearly there! This is the latest hitch:


#11

@tmeasday your wish is my command. Sort of.

For fun I tried to unit test TodoItem from the todos app and quickly ran into the same issue as @ffxsam. I hacked my way through, and the resulting hideous proof-of-concept is available here:

If you or @ffxsam or anybody else has ideas about how to improve it, I’d love to flesh this out into a solution worthy of merging.


#12

@ffxsam Todos enzyme PR has been merged :tada: and guide PR is open :gift: if either of these is useful:


#13

Aaand … here’s a tutorial to make it accessible. Couldn’t help myself from geeking out on this after @tmeasday’s challenge above:


#14

Wow, amazing work, Michael! Bookmarking to check this out later today…


#15

Haven’t had a chance yet - super swamped. Quick Q: does this solution actually work when testing components that import Meteor packages?

Answer: Yes it does. Ok.

And wow… the testing section of the Meteor Guide has grown in leaps and bounds since I last looked. There’s a ton of info there!

The only thing I don’t like about Meteor’s tests is that they take a while to build/run, whereas testing with purely npm & mocha is lightning fast. In an ideal world, I would probably delegate testing responsibilities to different tools, e.g.:

  • Use npm, mocha, and enzyme for React component testing
  • Use meteor test for Meteor-specific and server-side stuff

The problem with using a non-Meteor way to test React components is that it’ll trip up when it sees code that imports from meteor packages, unless you (somehow) use proxyquire to make it avoid importing those things, which I haven’t figured out. It all makes my head spin.

But at least the official Meteor route is tried and proven, and well-documented. Time to study!


#16

@ffxsam you may also want to check out my original PR. It was a standalone NPM test-runner and I did it that way for speed. I didn’t need to use proxyquire and it works (though it’s a bit ugly):

I converted it to “Meteor style” for consistency with the guide. I’m guessing as the build tool thinking progresses (1.5? 1.6? 2.0?) the testing story will improve a lot with it.


#17

I’m happy with the Meteor setup. Although, I’ve run into some major snags… https://github.com/meteor/meteor/issues/7153


#18

Bummer. I subscribed to the issue and will try to help if I can…