Version 3.0 (Enzyme 3 and React 16 compatibility)

[adriantoine]

I was working on #63 and eventually decided to go for a slightly larger refactor of the library. It was started as simple quickly-made library and I was never expecting nearly 500 stars, so I think that it now needs a bit of polish. 😁

Here is a roadmap of everything I expect to be in the next major 3.0 release:

Roadmap

• Works with Enzyme v3
• Support deep and shallow mode for the mount wrapper
• Support top level array components (new in React 16)
• Remove mountToShallowJson and mountToDeepJson and use options with {mode: 'shallow'|'deep'|'normal'} instead
• Get rid of the warning in our tests Warning: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers. http://fb.me/react-polyfills coming with React 16
• Refactor serializer unit tests to only test the serializer instead of re-testing all wrappers
• Have 100% code coverage
• Refactor documentation
  • Simplified Readme
  • Made documentation files in a folder to detail all options and different use cases
• Implement a proper map functionality
• Provide TypeScript bindings

Bugs

None yet

Known potential breaking changes

• Components returning null or any falsy value are now rendered as an empty string in snapshots instead of null

• Shallow wrapper are now outputting undefined props:

  <BasicWithUndefined>
-   <button>
+   <button
+     disabled={undefined}
+   >
      Hello
    </button>
  </BasicWithUndefined>

• This use case won't be supported anymore, it seems incorrect anyway to pass this as a prop and I can see no usage of this in the react-bootstrap documentation anyway

• This use case won't be supported either as it doesn't seem to be supported by Enzyme either, you will just have to use their simulate helper to do that

• mountToShallowJson and mountToDeepJson are replaced by a mode option in mountToJson:

mountToShallowJson(wrapper);
// ==>
mountToJson(wrapper, {mode: 'shallow'});

mountToDeepJson(wrapper);
// ==>
mountToJson(wrapper, {mode: 'deep'});

All those changes will be made in the enzyme3 branch, I might create individual issues for some of those to track progress. I will also need a lot of testing with Enzyme 3 and React 16.

If anyone feels like working on any of the tasks above, please let me know! 😁

The first beta version has been released already 🎉, you can test it with this command:

npm install --save-dev enzyme-to-json@next

[adriantoine]

Beta 2 has been published with most of the items from the list addressed.

[adriantoine]

The output mapping feature I'm working on is working in the way that you can pass a map function in the options and this function will take the JSON as only parameter and can return a modified version of this JSON object.

For example:

const shallowed = shallow(
  <div randomlyGeneratedKey={Date.now()} className="wrapper">
    <strong randomlyGeneratedKey={Date.now()}>Hello!</strong>
    <strong className="strong2">Hello 2</strong>
  </div>,
);

expect(
  shallowToJson(shallowed, {
    map: json => ({
      ...json,
      props: omit(json.props, 'randomlyGeneratedKey'),
    }),
  }),
).toMatchSnapshot();

Here map is an arrow function which will remove all props called notInSnapshot, so the snapshot would be:

<div
  className="wrapper"
>
  <strong>
    Hello!
  </strong>
  <strong
    className="strong2"
  >
    Hello 2
  </strong>
</div>

and if you want to remove all attributes:

expect(
  shallowToJson(shallowed, {
    map: json => ({
      ...json,
      props: {},
    }),
  }),
).toMatchSnapshot();

outputs:

<div>
  <strong>
    Hello!
  </strong>
  <strong>
    Hello 2
  </strong>
</div>

You can also change the children of a component, return null if you don't want a component to be in your snapshots, etc...

[adriantoine]

The map feature has now been released in v3.0.0-beta4.

[kirill-kruchkov]

@adriantoine hello! Looks like Enzyme 3 is released: https://github.com/airbnb/enzyme/releases/tag/enzyme%403.0.0

[fernandopasik]

React 16 is out as well
facebook/react@5c6ef40

[adriantoine]

That's nice, I'll arrange a release of enzyme-to-json in the evening!

[fernandopasik]

Thanks for the hard work @adriantoine !!!

[adriantoine]

Thanks for your messages! v3.0.0 has been released, please report any bugs as soon as you find them! 😄