Question

所以我有一个我导入的组件用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'

更新

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

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

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

Answer 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的简单组件。

Answer 2

只是为了澄清，不变违规错误对于使用react-redux进行测试并不是唯一的。相反，当测试套件没有提供安装到DOM上的方法时，测试套件就会失败（出于同样的原因，如果你试图在一个不是的元素上调用.render，ReactDOM就会失败。在DOM中。

回应@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路由器提供了一个很好的示例，说明如何测试应用的导航相关方面here.您可以为jest.mock提供的其他参数也可以派上用场。

反应＆amp; Jest测试：连接到Redux的嵌套组件会出现Invariant Violation错误

2 个答案: