ReactTestRenderer:不变违反: getNodeFromInstance:无效参数

Question

我使用jest是为了使用快照测试。

我在react test-renderer中遇到了一个bug，不变量冲突: getNodeFromInstance:无效参数。

复制bug的最低限度代码：

import React from 'react';
import DateTime from 'react-datetime';
import CalendarContainer from 'react-datetime/src/CalendarContainer';

export default class CalendarTimer extends DateTime {

    render() {
        return ( <div className = "rdtPicker" >
                  <CalendarContainer view = {
                    this.state.currentView
                  }/>
                </div>
        );
    }
}

下面是测试规范文件

import React from 'react';
import renderer from 'react-test-renderer';
import CalendarTimer from 'components/Input/CalendarTimer';

describe('CalendarTimer', () => {
    it('rendered Calendar', () => {
        const calendarTimer = renderer.create( <
            CalendarTimer / >
        );
        expect(calendarTimer).toMatchSnapshot();
    });
});

错误：

  ● CalendarTimer › rendered Calendar

    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)

谁能帮我指出我做错了什么，并引导我解决同样的问题。

Answer 1

这里讨论的相关问题

如前所述，这是按预期发生的，因为

React测试呈现器没有耦合到React。它无法“猜测”您的组件所依赖的DOM API。您需要自己模拟节点，正如15.4.0发行说明中所指出的。我希望这能帮到你!

您可以看到您的包它的一些内部组件确实使用了ReactDOM。

第三方组件的建议解决方案是自己开玩笑地模仿它们。

如果你使用玩笑的话，解决方法很简单。只需模拟导致问题的第三方组件即可。 例如： jest.mock('third-party-button', () => 'ThirdPartyButton'); 把这个放在你的测试文件的顶部。 现在，任何第三方按钮的导入(用组件替换它)都会变成字符串(例如ThirdPartyButton)，这样组件就会像div一样成为快照中的“叶”。当然，这不会真正测试它，但是只测试您自己的代码是有意义的。

Answer 2

我用酶来解决这个问题。

测试代码

 import React from 'react';
 import ReactTestRenderer from 'react-test-renderer';
 import { shallow, mount } from 'enzyme'; // helps to handle refs
 import thunk from 'redux-thunk';
 import TestComponent from 'pathtocomponent';

describe('<TestComponent />', () => {   
    it('should render a action model when order is approved', () => {
      const component = mount(
        <TestComponent
         message="sample message" level="success" title="title sample"
        />
      );
      component.instance().componentDidMount();
      expect(component).toBeDefined();
    });

});

与参考文献有关的组件：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactNotificationSystem from 'react-notification-system';


export default class TestComponent extends Component {
  constructor(props) {
    super(props);
    this.addNotification = this.addNotification.bind(this);
    this.notificationSystem = null;

  }

  componentDidMount() {
    this.notificationSystem = this.refs.notificationSystem;
    this.addNotification();    
  }



  addNotification() {
    let that = this;
    this.notificationSystem.addNotification({
      message: that.props.message,
      level: that.props.level,
      position: 'tc',
      autoDismiss: 4,
      title: that.props.title,
    });
  }

  render() {
    return (<div>
      <TestComponent ref="notificationSystem" />
    </div>);
  }
}