TextField `multiline` with no `rows` throws error when using ReactTestRenderer

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

When a renderer for <TextField multiline /> is created by ReactTestRenderer.create, no errors should be thrown:

import React from 'react'
import ReactTestRenderer from 'react-test-renderer'

import TextField from '@material-ui/core/TextField'

it('should not throw errors', () => {
  ReactTestRenderer.create(<TextField multiline />)
})

Current Behavior 😯

Running a test containing such a request produces this error:

    Error: Uncaught [TypeError: Cannot read property 'style' of null]

This is what appears to be the relevant part of the stack trace:

    The above error occurred in the <ForwardRef(Textarea)> component:
        in ForwardRef(Textarea) (created by ForwardRef(InputBase))
        in div (created by ForwardRef(InputBase))
        in ForwardRef(InputBase) (created by WithStyles(ForwardRef(InputBase)))
        in WithStyles(ForwardRef(InputBase)) (created by ForwardRef(Input))
        in ForwardRef(Input) (created by WithStyles(ForwardRef(Input)))
        in WithStyles(ForwardRef(Input)) (created by ForwardRef(TextField))
        in div (created by ForwardRef(FormControl))
        in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
        in WithStyles(ForwardRef(FormControl)) (created by ForwardRef(TextField))
        in ForwardRef(TextField) (created by WithStyles(ForwardRef(TextField)))

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/create-react-app-jl67r

1. Go to the Tests tab
2. Note the failing test (the error is actually different in the sandbox—maybe this helps diagnose the problem?)
3. Note the other variants of rendering TextField that do not fail
4. Note the workaround (fourth test): using createNodeMock to return a textarea element

Context 🔦

I have test suites which render React components that have the Material UI TextField component with multiline set to true (but no rows attribute). These tests passed in v1.x (and the app works fine as well) but are now throwing this error in v4.1.3 (I skipped v3.x so I don’t know if they would have passed then).

I can use the createNodeMock workaround for now, but it feels unwieldy to add this to every usage of ReactTestRenderer for a component that happens to have a TextField multiline somewhere in its tree.

Your Environment 🌎

Tech	Version
Material-UI	v4.1.3
React	v16.8.6
Browser	n/a
TypeScript	n/a
etc.

Thanks in advance for any help that you might be able to provide!

[dondi]

Thanks for the quick analysis! It’ll take a little longer to digest everything but sure, once I’ve gotten myself situated, I can submit something.

[BobrImperator]

Just stumbled upon this, my solution for this was to not use react-test-renderer, but render from @testing-library/react

it("renders", () => {
  const { asFragment } = render(<Header text="Hello!" />);
  expect(asFragment()).toMatchSnapshot();
});

Shoutout to https://www.leighhalliday.com/introduction-react-testing-library where I was able to find this API for generating snapshots.