ReactTestRenderer：永久违反：getNodeFromInstance：无效参数

Question

我正在开玩笑，以便使用快照测试。

我在react-test-renderer中遇到了一个错误，Invariant Violation：getNodeFromInstance：Invalid parameter。

最少的代码即可复制错误：

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

相关问题在这里讨论

\n

正如所提到的，这正如预期的那样发生，因为

\n

\n

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

\n

\n

您可以看到您的包react-datetime确实在其某些内部组件中使用了 ReactDOM。

\n

对于第三方组件的建议解决方案是自己用玩笑来模拟它们

\n

\n

如果您使用 jest，解决方法很简单。只是模拟引起问题的第三方组件。

\n

例如：

\n

jest.mock(\'third-party-button\', () => \'ThirdPartyButton\');

\n

将其放在测试文件的顶部。

\n

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

\n

\n