反应与开玩笑的测试:连接到Redux的嵌套组件会出现不变违规错误 [英] React & Jest testing: nested component connected to Redux gives Invariant Violation error

问题描述

因此，我有一个要导入的组件以使用Jest做一些测试.

So I have a component that I import to do some testing with 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使得测试文件中的上述导入失败:

Just the fact that inside MyComponent there is OtherComponent, that is connected to Redux using connect makes the import above in the test file fail:

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

Invariant Violation: _registerComponent(...): Target container is not a DOM element.

  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'

So how can I test my component if the nested component is connected to Redux? O_O'

更新:

我正在从我的主应用程序文件 index.js 中从react-router导入历史记录，并调用它以将新路由推送到我的OtherComponent方法之一中.似乎是造成此问题的原因.所以我猜我不应该在组件内部使用历史记录吗?如果我选择保持这种方式，在测试中该如何处理?

I was importing the history from react-router from my main app file, index.js, and called it to push a new route inside one of my OtherComponent methods. It seems that was what caused the issue. So I guess I should not be using history inside my components? How would I handle that in my test if I chose to keep it that way?

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

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

推荐答案

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

One way in unit test is to focus only on the actual component and only test its behaviour. To do so you have to mock out the all other dependencies. In your case you can mock out OtherComponent and then just test that it eas used with the correct parameters.

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.

This will replace OtherComponent with a simple component with name OtherComponent.

这篇关于反应与开玩笑的测试:连接到Redux的嵌套组件会出现不变违规错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！