测试无状态功能组件时从高阶组件中检索 React 子组件答案

【问题标题】：retrieving React child component from Higher Order Component when testing Stateless Functional Component测试无状态功能组件时从高阶组件中检索 React 子组件
【发布时间】：2018-01-11 01:24:34
【问题描述】：

我正在为高阶组件 (HOC) 中的 React 无状态功能组件 (SFC) 编写开玩笑的单元测试。如何使用 TestUtils 查找 SFC 中的特定类？

具体来说，我的 SFC/HOC 如下所示：

import React from 'react'
import sizeMe from 'react-sizeme';

const MyClass = ({myText, size}) => {
  return (
    <div className="MyClassName">{myText}</div>
  );
};
export default sizeMe()(MyClass);

请注意，MyClass 是一个 SFC，我将它嵌入到包 react-sizeme 中的 HOC sizeMe 中。

我想做的测试是：

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import MyClass from './src/views/MyClass.js'
import Wrap from '../src/views/Wrap'

describe('<MyClass />, () => {
  it('can haz my text', () => {
    const myClass = TestUtils.renderIntoDocument(
      <Wrap>
        <MyClass myText={'my text'} />
      </Wrap>
    );
    const myText = TestUtils.findRenderedDOMComponentWithClass(myClass,'MyClassName').innerHTML;
    expect(myText).toEqual('myText');
  });
});

在这个测试中，我使用了我通常用来测试 SFC 的实用程序类 Wrap：

import React from 'react';

class Wrap extends React.Component {
  render() {
    return <div>{this.props.children}</div>
  }
}

我的测试失败，因为 TestUtils.findRenderedDOMComponentWithClass 找不到 MyClass。我收到消息“没有为 class:MyClass 找到一个匹配项（找到：0）”

如何检索 MyClass？我最喜欢使用 React 的 TestUtils，但如果不可能，我愿意接受其他方法。

【问题讨论】：

标签： reactjs unit-testing jestjs

【解决方案1】：

要让它工作，必须导出/导入非 HOCed 组件。这需要 3 次更改。首先要在 MyComponent 的定义中添加 export 关键字。

export const MyClass = ...

第二个变化是 MyClass 的导入方式。由于 HOCed MyClass 是默认导出，因此导出非 HOCed 版本需要将 MyClass.js 中的所有导出导入为

 import * as MC from './src/views/MyClass.js

最后，非 HOCed 组件现在可以在测试中作为

<MC.MyClass myText={'my text'} />

由于默认导出未更改，因此 HOCed 组件仍将用于常规导入，因此无需更改应用程序的其他部分。

【讨论】：