Update documentation with issues using react-test-renderer

[mrchief]

Creating this issue as per our discussion on gitter.

react-test-renderer doesn't support refs based components for testing. See:

facebook/react/issues/9244
facebook/jest/issues/1805
facebook/jest/issues/5462

The workarounds are:

Mock 3rd party components

E.g.

jest.mock('rmwc/TopAppBar/TopAppBar', () => {
  return (props) => <div>{props.children}</div>;
})

Use something like createNodeMock

See https://reactjs.org/docs/test-renderer.html#ideas (source)

Use ReactDOM or Enzyme

See facebook/jest/issues/5462#issuecomment-363532494

[mrchief]

Enzmye based test:

import { shallow } from 'enzyme'
import toJson from 'enzyme-to-json'

describe('<Header />', () => {
  it('renders', () => {
    const props = {
      siteTitle: 'Test Site Title'
    }

    const wrapper = shallow(<Header {...props} />)

    expect(toJson(wrapper)).toMatchSnapshot()  // optional. only needed for snapshot based testing 
  })
})

[jamesmfriedman]

@mrchief does the shallow rendering from the Enzyme based test work?

[mrchief]

Yes, no issues with Enzyme. I'm still using the polyfill though. Let me know if you want me to try without the polyfill.

[jamesmfriedman]

Updated the docs accordingly, will be released with 1.8