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

【问题标题】：React & Jest testing: nested component connected to Redux gives Invariant Violation errorReact & Jest 测试：连接到 Redux 的嵌套组件给出了 Invariant Violation 错误
【发布时间】：2017-06-26 22:36:53
【问题描述】：

所以我导入了一个组件来使用 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 使得上面在测试文件中的导入失败：

Invariant Violation：_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'

更新：

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

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

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

【问题讨论】：

标签： reactjs testing redux jestjs

【解决方案1】：

单元测试的一种方法是只关注实际组件并只测试其行为。为此，您必须模拟所有其他依赖项。在您的情况下，您可以模拟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 的简单组件。

【讨论】：

【解决方案2】：

澄清一下，Invariant Violation 错误并不是使用react-redux 进行测试所独有的。相反，当没有提供挂载到 DOM 上的方法时，测试套件会失败（这与如果您尝试在不在 DOM 中的元素上调用 .render 的原因大致相同）。

呼应@Andreas 所说的-您可以在测试设置期间使用jest.mock 来初始化ReactDOM。然后，对于react-redux，您可以将store 作为道具传递给被测试的组件：

import Timer from './Timer';
import { store } from './store';

jest.mock("./index.js", () => "root");

describe('Timer test: ', () => {
  it('should render', () => {
    const wrapper = <Timer store={store} />
    expect(wrapper);
  });
});

关于您的更新：React Router 提供了一个很好的示例，说明如何测试您的应用程序的导航相关方面here. 您可以提供给jest.mock 的其他参数也可能会派上用场。

【讨论】：