Jest snapshot testing - ReactTestRenderer: Invariant Violation: getNodeFromInstance: Invalid argument

[baraneedharan]

I am trying to write snapshot testing for my component which uses react-datetime. Since i was getting error I removed all the code related to my component and tested react-datetime only.

Here is the test spec file

import React from 'react';
import renderer from 'react-test-renderer';
import DateTime from 'react-datetime';

describe('DateTimer', () => {

  it('render Date picker', () => {
    const dateTimer = renderer.create(
      <DateTime timeFormat={false}/>
    );
    expect(dateTimer.toJSON()).toMatchSnapshot();
  });
});

When I run my test, I get the below error

  ● CalendarTimer › rendered render Date picker

    Invariant Violation: getNodeFromInstance: Invalid argument.

      at invariant (node_modules/fbjs/lib/invariant.js:44:15)
      at Object.getNodeFromInstance (node_modules/react-dom/lib/ReactDOMComponentTree.js:162:77)
      at Object.findDOMNode (node_modules/react-dom/lib/findDOMNode.js:49:41)
      at componentDidMount (node_modules/react-onclickoutside/index.js:153:40)
      at chainedFunction [as componentDidMount] (node_modules/create-react-class/factory.js:617:11)
      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)
      at ReactTestReconcileTransaction.closeAll (node_modules/react-test-renderer/lib/Transaction.js:206:25)
      at ReactTestReconcileTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:153:16)
      at batchedMountComponentIntoNode (node_modules/react-test-renderer/lib/ReactTestMount.js:69:27)
      at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:140:20)
      at Object.batchedUpdates (node_modules/react-test-renderer/lib/ReactDefaultBatchingStrategy.js:62:26)
      at Object.batchedUpdates (node_modules/react-test-renderer/lib/ReactUpdates.js:97:27)
      at Object.render (node_modules/react-test-renderer/lib/ReactTestMount.js:125:18)
      at Object.<anonymous> (tests/components/Input/CalendarTimer_spec.js:8:53)
      at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
      at process._tickCallback (internal/process/next_tick.js:103:7)

and

When I tried using shallow and snapshot together like below

import React from 'react';
import { shallow } from 'enzyme';
import DateTime from 'react-datetime';

describe('DateTimer', () => {

  it('render Date picker', () => {
    const dateTimer = shallow(
      <DateTimer timeFormat={false}/>
    );
    expect(dateTimer).toMatchSnapshot();
  });
});

When I run the test .snap file got generated and it is rendering the calendarContainer as like below

exports[`DateTimer rendered Date picker 1`] = `
ShallowWrapper {
  "complexSelector": ComplexSelector {
    "buildPredicate": [Function],
    "childrenOfNode": [Function],
    "findWhereUnwrapped": [Function],
  },
  "length": 1,
  "node": <div
    className="rdtPicker"
>
    <Unknown
        className=""
        closeOnSelect={false}
        closeOnTab={true}
        dateFormat={true}
        defaultValue=""
        input={true}
        inputProps={Object {}}
        onBlur={[Function]}
        onChange={[Function]}
        onFocus={[Function]}
        strictParsing={true}
        timeConstraints={Object {}}
        timeFormat={true}
        utc={false}
    />
</div>,

Can someone please help me fixing this.

[simeg]

Hi @baraneedharan. Snapshot testing is new to me but reading up on it, it sounds very useful. I will put this on the TODO list for this component and maybe I will solve the issue you are having. If you solve it please post it here, thanks.

[simeg]

@baraneedharan I took a stab at this and I got it working. According to this issue findDOMNode() is not supported. So what I did was to mock it, like being proposed in the issue. This way the test is passing.

import React from 'react';
import Datetime from '../DateTime.js';
import renderer from 'react-test-renderer';

jest.mock('react-dom', () => ({
    findDOMNode: () => {},
}));

it('renders correctly', () => {
    const tree = renderer.create(
        <Datetime />
    ).toJSON();
    expect(tree).toMatchSnapshot();
});