React & Jest 测试：连接到 Redux 的嵌套组件给出 Invariant Violation 错误

因此，我导入了一个组件来使用 Jest 进行一些测试。

class MyComponent extends Component {
  render() {
    return (
      <div>
        <OtherComponent />
      </div>
    );
  }
}

export { MyComponent };

其中另一个组件定义为：

class OtherComponent extends Component { ... }
export default connect(...)(OtherComponent);

我的测试如下：

import React from 'react';
import { shallow } from 'enzyme';

import { MyComponent } from '../../components/MyComponent';
// ...

事实上，在 MyComponent 内部有一个 OtherComponent，它使用 connect 连接到 Redux，导致上面的测试文件中的导入失败：

不变违规：_registerComponent(...)：目标容器不是 DOM 元素。

  at invariant (node_modules/fbjs/lib/invariant.js:44:15)
  at Object._renderNewRootComponent (node_modules/react-dom/lib/ReactMount.js:311:76)
  at Object._renderSubtreeIntoContainer (node_modules/react-dom/lib/ReactMount.js:401:32)
  at Object.render (node_modules/react-dom/lib/ReactMount.js:422:23)
  at Object.<anonymous> (my-app-directory/index.js:30:46)
  at Object.<anonymous> (my-app-directory/components/OtherComponent.js:x:xx)
  at Object.<anonymous> (my-app-directory/components/MyComponent.js:x:xx)
  at Object.<anonymous> (my-app-directory/test/components/MyComponent.test.js:x:xx)
  at handle (node_modules/worker-farm/lib/child/index.js:41:8)
  at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:47:3)
  at emitTwo (events.js:106:13)
  at process.emit (events.js:191:7)
  at process.nextTick (internal/child_process.js:744:12)
  at _combinedTickCallback (internal/process/next_tick.js:67:7)
  at process._tickCallback (internal/process/next_tick.js:98:9)

那么，如果嵌套组件连接到 Redux，我该如何测试我的组件呢？ O_O'

Update:

我正在从我的主应用程序文件中导入反应路由器的历史记录，index.js，并调用它在我的 OtherComponent 方法之一中推送新路由。看来这就是导致问题的原因。所以我想我不应该在我的组件中使用历史记录？如果我选择保持这种状态，我将如何在测试中处理这个问题？

import { history } from '../'; // index.js file with ReactDOM injection

class OtherComponent extends Component { 
  // ...
  someMethod() {
    callSomeActionCreator();
    history.push('/some/route');
  }
}

单元测试的一种方法是仅关注实际组件并仅测试其行为。为此，您必须模拟所有其他依赖项。在你的情况下你可以模拟OtherComponent然后测试它是否使用了正确的参数。

import React from 'react';
import { shallow } from 'enzyme';
import { MyComponent } from '../../components/MyComponent';

jest.mock('../../OtherComponent', () => 'OtherComponent')//note that the path is relative to your test files

这将取代OtherComponent带有一个带有名称的简单组件OtherComponent.