JSX diff

[vvo]

Hi, I am using https://facebook.github.io/react/docs/test-utils.html#shallow-rendering and wondering how we could automatically have expect() show a nice diff when JSX passed?

I am willing to do the development (maybe in another module?) but would like some insight of you. There's already a jasmine project doing it, I find it really nice: https://www.npmjs.com/package/jasmine-react-diff

Let me know how I can help

[rstacruz]

Expect just earned an API to allow for extensions... this seems like something that can be done as a separate npm package. Why don't you give it a shot? I expect it's something you can do as expect(a).toJsxEqual(b), or you can patch toEqual to check for JSX-ness.

[mjackson]

You can start like this:

expect.extend({
  toEqualJSX(jsx) {
    // this.actual is the thing that was passed to expect()
  }
})

expect(<div>hello</div>).toEqualJSX(<div>hello</div>)

[vvo]

So I did:

• https://github.com/algolia/react-element-to-jsx-string
• https://github.com/algolia/expect-to-equal-jsx

And I get (mocha):

It was cool, hope this will be usable for a lot of other people. Since I have been testing with react shallow renderer, comparing using toEqualJSX is a joy.

We will write a blog post soon about all this.

@mjackson what do you think?

[rstacruz]

export default function toEqualJSX(ReactElement) {
  return expect(
    reactElementToJSXString(this.actual)
  ).toEqual(
    reactElementToJSXString(ReactElement)
  );
}

I like it.

[mjackson]

This looks great! Let's add something to the README about extensions that people are building.

One small nitpick is that people who aren't using ES6 will have to do:

var toEqualJSX = require('expect-to-equal-jsx');

expect.extend({
  toEqualJSX: toEqualJSX
});

It would be nice instead if your module just exported the object to pass directly to expect.extend, so people could do this:

expect.extend(require('expect-to-equal-jsx'));

[rstacruz]

👍

[vvo]

@mjackson Yes will do, then will open a PR here and we can close this issue then :)

[redox]

👍

[vvo]

Now solved! See https://github.com/mjackson/expect/#extensions and https://github.com/algolia/expect-jsx