Shallow Rendering Jest Snapshots

Update(Jan 3, 2018)

Shallowrender has been moved to react-test-renderer

import ShallowRenderer from 'react-test-renderer/shallow'

it('Matches snapshot', () => {
  const renderer = new ShallowRenderer()
  const result = renderer.render(<A />)
  expect(result).toMatchSnapshot()
})

---

You can use react-test-utils Shallow Rendering with snapshot testing as well:

import ReactTestUtils from 'react-addons-test-utils';

describe('Test', () => {

   it('renders correctly', () => {
      const renderer = ReactTestUtils.createRenderer();
      expect(renderer.render(<A />)).toMatchSnapshot();
   });
});

With that you can create renderer that only renders 1 level deep, that is: it'll only render what's in your component's render() function, and not render child components.

react-test-renderer is a different renderer, it renders your component (and the whole tree) to JSON. Currently it has no option to shallow render, it will work just like in the browser and render everything, but to JSON.

They both are good for testing because they don't require a DOM environment and they have different characteristics. You can choose one that suits better your use case.

You can use enzyme to shallow-render your components.

I can't tell you for sure as to why it's not the preferred method in the docs, but my guess would be that it's because the functionality isn't built into the official react-test-renderer.