Support react shallow render.

[bogdan-zaharia-hs]

I usually write the snapshot tests using enzyme shallow render:

it('matches snapshot', () => {
  const shallowNode = shallow(<Component />).getNode();
  expect(shallowNode).toMatchSnapshot();
});

I would like to keep this approach when having diffs. However, I get fully rendered components when I do:

it('matches diff snapshot', () => {
  const firstShallowNode = shallow(<Component />).getNode();
  const secondShallowNode = shallow(<Component selected />).getNode();
  expect(firstShallowNode).toMatchDiffSnapshot(secondShallowNode)
});

That's because .getNode also returns a React Component so the diff will choose the react diff path

I'm not sure what would be the solution for this. I've modified the code to ignore the Component check statement and it works fine with diffStrings.

[thymikee]

This should be as easy as importing ReactTestComponent from pretty-format plugins here and pass it to pretty-format config (also adjusting the test function). Can you try it?

[bogdan-zaharia-hs]

That's not actually solving the issue.

I'll give a more complete example to illustrate my use-case:

describe('snapshot-diff tests', () => {
  const Bar = () => <span>inside Bar</span>;
  const Foo = ({ text = 'none' }) => <div><Bar /><span>{text}</span></div>;

  it('diffs react components', () => {
    const shallowNode = component => shallow(component).getNode();

    const base = <Foo />;
    const withText = <Foo text="something" />;

    expect(shallowNode(base)).toMatchDiffSnapshot(shallowNode(withText), {
      aAnnotation: 'base',
      bAnnotation: 'with text',
    });
  });
});

Running this yield the following snapshot:

Snapshot Diff:
- <div><Bar /><span>none</span></div>
+ <div><Bar /><span>something</span></div>

  <div>
    <span>
      inside Bar
    </span>
    <span>
-     none
+     something
    </span>
  </div>
`;

What I would like to get is:

Snapshot Diff:
- base
+ with text

  <div>
    <Bar />
    <span>
-     none
+     something
    </span>
  </div>
`;

That could be done by giving the user the choice of rendering for React Components, instead of using react-test-renderer:

• The easiest and most flexible way would be to just use diffStrings for everything, and choose react-test-renderer or shallow in the client code.
• Another option would be to add rendering options for react components.

[agrinko]

Faced the same issue. Are the any updates or workarounds here?