Javascript ReactTestRenderer:不变冲突：getNodeFromInstance:无效参数

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

我在react测试呈现程序中遇到一个错误，不变量冲突：getNodeFromInstance:无效参数

复制错误的最少代码：

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>
        );
    }
}

从“React”导入React；
从“反应日期时间”导入日期时间；
从“react datetime/src/CalendarContainer”导入CalendarContainer；
导出默认类CalendarTimer扩展日期时间{
render（）{
报税表（
);
}
}

这是测试规范文件

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();
    });
});

从“React”导入React；
从“反应测试渲染器”导入渲染器；
从“组件/输入/日历计时器”导入日历计时器；
描述（'CalendarTimer'，（）=>{
它（'渲染日历'，（）=>{
const 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)

● 日历计时器›渲染日历
不变冲突：getNodeFromInstance:参数无效。
at invariant（node_modules/fbjs/lib/invariant.js:44:15）
在Object.getNodeFromInstance（node_modules/react dom/lib/ReactDOMComponentTree.js:162:77）
在Object.findDOMNode（node_modules/react dom/lib/findDOMNode.js:49:41）
在componentDidMount（node_modules/react onclickout/index.js:153:40）
在chainedFunction[作为componentDidMount]（node_modules/create react class/factory.js:617:11）
在节点_modules/react test renderer/lib/ReactCompositeComponent.js:265:25
在measureLifeCyclePerf（node_modules/react test renderer/lib/ReactCompositeComponent.js:75:12）
在节点_modules/react test renderer/lib/ReactCompositeComponent.js:264:11
在CallbackQueue.notifyAll（node_modules/react test renderer/lib/CallbackQueue.js:76:22）
在ReactTestReconficateTransaction.close（节点_modules/react test renderer/lib/ReactTestReconficateTransaction.js:36:26）
在ReactTestReconficateTransaction.closeAll（node_modules/react test renderer/lib/Transaction.js:206:25）
在ReactTestReconficateTransaction.perform（node_modules/react test renderer/lib/Transaction.js:153:16）
在BatchedMountComponentNode（node_modules/react test renderer/lib/ReactTestMount.js:69:27）
在ReactDefaultBatchingStrategyTransaction.perform（node_modules/react test renderer/lib/Transaction.js:140:20）
在Object.batchedUpdate（node_modules/react test renderer/lib/ReactDefaultBatchingStrategy.js:62:26）
在Object.batchedUpdate（node_modules/react test renderer/lib/ReactUpdates.js:97:27）
在Object.render（node_modules/react test renderer/lib/reactestmount.js:125:18）
反对。（测试/组件/输入/日历计时器规范js:8:53）
在Promise.resolve.then.el（node_modules/p-map/index.js:42:16）
在进程中。_tick回调（内部/process/next_tick.js:103:7）

有没有人能告诉我我做错了什么，并指导我纠正同样的错误

讨论相关问题

如前所述，这正如预期的那样发生，因为

React测试呈现程序未耦合到React DOM。它无法“猜测”组件所依赖的DOM API。您需要自己模拟节点，如15.4.0发行说明中所述。我希望这有帮助

你可以看到你的包裹

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

如果使用玩笑，解决方法很简单。只需模拟导致问题的第三方组件

例如：

jest.mock（'third-party-button'，（）=>'ThirdPartyButton'）

把它放在测试文件的顶部

现在，任何第三方按钮的导入（用您的组件替换）都将成为字符串（例如ThirdPartyButton），因此该组件将成为快照中的“叶子”，就像div一样。当然，这实际上不会测试它，但只测试您自己的代码是有意义的

我用酶的数量解决了这个问题

测试代码

 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();
    });

});

从“React”导入React；
从“react test renderer”导入react TestRenderer；
从“酶”导入{shall，mount}；//有助于处理裁判
从“redux thunk”导入thunk；
从“pathtocomponent”导入TestComponent；
描述（“”，（）=>{
它（'订单批准时应呈现动作模型'，（）=>{
常量组件=挂载(
);
component.instance（）.componentDidMount（）；
expect（component.toBeDefined（）；
});
});

带有Ref的组件：

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>);
  }
}

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
从“反应通知系统”导入反应通知系统；
导出默认类TestComponent扩展组件{
建造师（道具）{
超级（道具）；
this.addNotification=this.addNotification.bind（this）；
this.notificationSystem=null；
}
componentDidMount（）{
this.notificationSystem=this.refs.notificationSystem；
这个.addNotification（）；
}
addNotification（）{
让那=这；
此文件为.notificationSystem.addNotification({
消息：那。道具。消息，
关卡：那。道具关卡，
位置：‘tc’，
自动解雇：4，
标题：that.props.title，
});
}
render（）{
返回(
);
}
}