Incomplete Mocha example?

[pushred]

Hi!

Apologies if this is a Mocha or expect issue but there's maybe some crucial missing information in the readme here, since Mocha is the example runner.

I wrote a test that essentially follows that example, but it doesn't work:

var expect = require('expect');
var expectJSX = require('expect-jsx');
var it = require('mocha/lib/mocha.js').it;
var React = require('react');

expect.extend(expectJSX);

var Datetime = require('./Datetime.jsx');

it('example test', function (done) {
    expect(
        <Datetime date='2016-01-01T10:00:00Z' />
    ).toEqualJSX(
        <time>
            <span className="date">Jan 1</span>
            <span className="year">2016</span>
            <span className="time">10am</span>
        </time>
    );
    done();
});

Yet the test component isn't rendering to a string:

Error:
Expected '<Datetime\n  date="2016-01-01T10:00:00Z"\n  tz="UTC"\n/>'
to equal '<time>\n  <span className="date">\n    Jan 1\n  </span>\n  <span className="year">\n    2016\n  </span>\n  <span className="time">\n    10:00am\n  </span>\n</time>'

Looking at the expect-jsx source I don't see any JSX handling specifically for the expect argument so I'm assuming the test source should be compiled before it's passed in. Per Mocha's readme I run the test with:

mocha **/**/*.test.* --compilers jsx:babel-register

If I inspect my component I see a React element:

{ '$$typeof': Symbol(react.element),
  type: 
   { [Function: Datetime]
     propTypes: { date: [Function: bound checkType], tz: [Object] },
     defaultProps: { tz: 'UTC' } },
  key: null,
  ref: null,
  props: { date: '2016-01-01T10:00:00Z', tz: 'UTC' },
  _owner: null,
  _store: {} }

So Mocha's compiler seems to work fine and .toEqualJSX is also working fine. It's unclear why the input remains the original JSX string rather than it's output.

For now I am rendering the input separately, but the readme doesn't say anything about this..

[vvo]

Hi @pushred as I do not see any obvious issue causing this, could you create a reusable simple GIT repository where I could:

npm install
npm test

?

Thanks

[pushred]

Thank you for the sanity check!

I've pushed a reduction here: https://github.com/pushred/expect-jsx-mocha

I included two test scripts to test both approaches Mocha's docs mention. In my case I'm using the JSX approach but I'm able to reproduce the issue with *.js all around as well, also tried a div vs. time but I'm still getting this result all around:

Error: Expected '<Component />' to equal '<time>\n  to test\n</time>'
      + expected - actual

      -<Component />
      +<time>
      +  to test
      +</time>

      at assert (node_modules/expect/lib/assert.js:29:9)
      at Expectation.toEqual (node_modules/expect/lib/Expectation.js:81:30)
      at Expectation.toEqualJSX (node_modules/expect-jsx/index-dist.js:27:93)
      at Context.<anonymous> (test.js:15:11)

[pushred]

Bit more context: to do the rendering I'm currently using this: https://github.com/MoOx/jsx-test-helpers/blob/master/src/index.js#L23

Using react-element-to-jsx-string directly actually didn't work, giving me a similar result like the above. So it seems I'm missing the shallow renderer that jsx-test-helpers adds, which gives me a working test where I can use the expect-jsx methods, though my diffs are not clean. Here's a test that fails because a single string in the component is different:

Error: Expected '<table className="Table"> <thead className="Table__header"> <tr className="Table__row"> <th> color </th> </tr> </thead> <tbody className="Table__content"> <tr className="Table__row"> <td> green </td> </tr> <tr className="Table__row"> <td> blue </td> </tr> </tbody> </table>' to include '<tbody className="Table__content"> <tr className="Table__row"> <td> green </td> </tr> <tr className="Table__row"> <td> orange </td> </tr> </tbody>'
      at assert (node_modules/expect/lib/assert.js:29:9)
      at Expectation.toInclude (node_modules/expect/lib/Expectation.js:215:28)
      at Expectation.toIncludeJSX (node_modules/expect-jsx/index-dist.js:33:131)
      at Context.<anonymous> (src/components/Table.test.js:22:12)

[pushred]

Not sure if the diff of child DOM components like in the above is supposed to be clean, it's working okay for single components.

[vvo]

Thanks a lot for the deep investigation, after having a closer look it seems to be a misconception of what expect-jsx provides.

In the test file (

expect-jsx/index-test.js

Lines 32 to 38 in 919a766

	it('can diff React elements', () => {
	expect(
	<TestComponent />
	).toEqualJSX(
	<TestComponent />
	);
	});

) you will see that we do not actually ensure the component renders internally a div Hi!, we only do one level rendering testing.

Given what you want to do, you might get better results by just using http://facebook.github.io/jest/

We are not anymore using expect-jsx at Algolia, we only use Jest and snapshot rendering, which is what you are looking for.

react-element-to-jsx-string is still a fun tool but I believe React testing tools are now able to do the same (see Jest snapshots testing).

Let me know what you think.

[pushred]

Ahh gotcha.. it's especially shallow. I'm using mocha at the moment because I'm working within an existing project and was trying to conform to it's existing test suite for the backend. Jest can do that of course but that'd be a bigger project.

Snapshots have been a turnoff because of the noise they add to Git diffs (understood this is supposed to be a good thing) but I think I'll have to give it and Jest a shot if my components get much more complex. In other words I'll be using Jest in a week =)

Thanks again, you've confirmed there's no magic I am missing!

[vvo]

but I think I'll have to give it and Jest

Really advising you to try again, once your components are a bit stable it's a joy. Noise in GIT
BUT no noise in tests (while there's some good noise in expect-jsx)