react-textarea-autosize: Assertion of `_rootDOMNode` doesn't catch `null`

I see the following issue testing components that rely on react-textarea-autosize:

    TypeError: Cannot read property 'style' of null

      at Window.getComputedStyle (node_modules/jsdom/lib/jsdom/browser/Window.js:371:19)
      at calculateNodeStyling (node_modules/react-textarea-autosize/lib/calculateNodeHeight.js:111:22)
      at calculateNodeHeight (node_modules/react-textarea-autosize/lib/calculateNodeHeight.js:43:21)
      at TextareaAutosize._this._resizeComponent (node_modules/react-textarea-autosize/lib/index.js:78:58)
      at TextareaAutosize.componentDidMount (node_modules/react-textarea-autosize/lib/index.js:140:10)
      at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:265:25
      at measureLifeCyclePerf (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:75:12)
      at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:264:11
      at CallbackQueue.notifyAll (node_modules/react-test-renderer/lib/CallbackQueue.js:76:22)
      at ReactTestReconcileTransaction.close (node_modules/react-test-renderer/lib/ReactTestReconcileTransaction.js:36:26)

It seems like the following check should handle null: https://github.com/andreypopp/react-textarea-autosize/blob/master/src/index.js#L134

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 3
Comments: 16 (8 by maintainers)

Most upvoted comments

@dimon85

I’ve found the solution here.

    const tree = renderer.create(
      <Textarea
        name="description"
        placeholder="Description"
      />,
      { createNodeMock: () => document.createElement('textarea') }
    ).toJSON();

Im not convinced at the moment that we should guard against this. react-test-renderer chose not to provide refs automatically, its their API and people should be aware if they chose to use it. OTOH it’s really a shame that this doesnt work out of the box so I might consider adding guards in the future.

Also - please use just enzyme, its quite a recommended way.

Andarist on Aug 29, 2017

@mertkahyaoglu , my solution: import toJson from 'enzyme-to-json'; import { shallow } from 'enzyme'; it('+++ should render correctly', () => { const component = shallow(<Textarea name="description" placeholder="Description" />); expect(toJson(component)).toMatchSnapshot() });

dimon85 on Oct 31, 2017