How do I use Chimp for testing React components?

testing
1

I would like to use Chimp, with Mocha and Enzyme, for testing React components. However, I tried re-creating the setup described by @ffxsam for doing this, but instead using Chimp as the test runner, and am getting a unexpected token error.

The test

import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import Thing from '../client/components/thing';

describe('<Thing />', function () {
  it('contains a div with class abc and a hello message', function () {
    expect(shallow(<Thing />).contains(<div className="abc">Hi</div>)).to.equal(true);
  });
});

The error I am getting

> chimp --ddp=http://localhost:3000 --mocha --watch --path=tests

[chimp] Watching features with tagged with @focus,@dev,@watch

[chimp] Running...
/usr/local/lib/node_modules/chimp/dist/lib/mocha/mocha-wrapper.js:56
  throw e;
  ^

SyntaxError: /Users/Anders/dev/explore/meteor/testing/meteor-chimp/app/tests/react_test.js: Unexpected token (8:19)
   6 | describe('<Thing />', function () {
   7 |   it('contains a div with class abc and a hello message', function () {
>  8 |     expect(shallow(<Thing />).contains(<div className="abc">Hi</div>)).to.equal(true);
     |                    ^
   9 |   });
  10 | });
    at Parser.pp.raise (/usr/local/lib/node_modules/chimp/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.pp.unexpected (/usr/local/lib/node_modules/chimp/node_modules/babylon/lib/parser/util.js:89:8)
    at Parser.pp.parseExprAtom (/usr/local/lib/node_modules/chimp/node_modules/babylon/lib/parser/expression.js:517:12)
    at Parser.pp.parseExprSubscripts (/usr/local/lib/node_modules/chimp/node_modules/babylon/lib/parser/expression.js:272:19)
    at Parser.pp.parseMaybeUnary (/usr/local/lib/node_modules/chimp/node_modules/babylon/lib/parser/expression.js:252:19)
    at Parser.pp.parseExprOps (/usr/local/lib/node_modules/chimp/node_modules/babylon/lib/parser/expression.js:183:19)
    at Parser.pp.parseMaybeConditional (/usr/local/lib/node_modules/chimp/node_modules/babylon/lib/parser/expression.js:165:19)
    at Parser.pp.parseMaybeAssign (/usr/local/lib/node_modules/chimp/node_modules/babylon/lib/parser/expression.js:128:19)
    at Parser.pp.parseExprListItem (/usr/local/lib/node_modules/chimp/node_modules/babylon/lib/parser/expression.js:1032:16)
    at Parser.pp.parseCallExpressionArguments (/usr/local/lib/node_modules/chimp/node_modules/babylon/lib/parser/expression.js:348:20)
    at Parser.pp.parseSubscripts (/usr/local/lib/node_modules/chimp/node_modules/babylon/lib/parser/expression.js:311:31)
    at Parser.pp.parseExprSubscripts (/usr/local/lib/node_modules/chimp/node_modules/babylon/lib/parser/expression.js:282:15)
    at Parser.pp.parseMaybeUnary (/usr/local/lib/node_modules/chimp/node_modules/babylon/lib/parser/expression.js:252:19)
    at Parser.pp.parseExprOps (/usr/local/lib/node_modules/chimp/node_modules/babylon/lib/parser/expression.js:183:19)
    at Parser.pp.parseMaybeConditional (/usr/local/lib/node_modules/chimp/node_modules/babylon/lib/parser/expression.js:165:19)
    at Parser.pp.parseMaybeAssign (/usr/local/lib/node_modules/chimp/node_modules/babylon/lib/parser/expression.js:128:19)
^C

Here is a repo with the entire test and setup.

Any ideas as to what the issue might be? @sam @ffxsam ?

2

Sorry Anders! I really don’t know. I took one dive into testing and it went OK, with just pure Mocha & Enzyme. Once I added Meteor into the picture and started getting into factories and such, it got a bit more complicated. Then I ran out of time, and don’t have any time currently to dig into testing. Hopefully some time next month I’ll have some time to dig into this again!

3

@andersr you can’t really use Chimp like you’ve tried to for testing react components.

It’s all about the test boundaries.

The Mocha & Enzyme unit approach loads an individual react component (system under test) into the test context, Enzyme renders it, and allows you to use the shallow dom to interact with the component so you can test it.

The Chimp end-to-end approach gives you a browser object that you can automate using Webdriver.IO. You use the browser to navigate to a page that will render the component (system under test) and then use a real browser to interact with the component so you can test it.

You should do exhaustive testing with the unit approach to make sure the component works as specified.
You should do value testing with the end-to-end approach to make sure the value to the user can be reaped. That is, the component is a means to an end and not the subject of the test.

For the latter, have a look at the Page Objects pattern as it allows you to define an API to talk to the ui components using the browser. This makes your automation code very maintainable.

HTH

2 Likes
4

@ffxsam - no worries!

@sam - thanks for the clarification. If I should not be using Chimp for testing React components, any recommendations what I should be using?

Anyway, thanks again. Any additional tips are highly welcome!

5

Hey @andersr, check out my Meteor/React boilerplate, testing works out of the box. Just run npm run test-watch. (make sure you run npm run scaffold after cloning the repo though) Hopefully that serves at least as a good starting point.

1 Like
6

Thanks, will check it out!

7

@andersr try this:

8

It needs some factoring out of some of the boilerplate things (like globals) into a separate file for clarity, but the ideas are all there

9

A year later, a year wiser. :wink:

Don’t use anything overly complicated to unit test your React components! Use Jest & Enzyme. Meteor’s testing mechanisms are not needed for unit testing.

1 Like