Question

我正在为高阶组件（HOC）内的React无状态功能组件（SFC）编写jest单元测试。如何使用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的utitlity类Wrap：

import React from 'react';

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

我的测试失败，因为TestUtils.findRenderedDOMComponentWithClass找不到MyClass。我得到了消息＆＃34;没有为课程找到一个匹配（找到：0）：MyClass＆＃34;

如何检索MyClass？我最希望使用React的TestUtils，但如果不可能，我会对其他方法持开放态度。

Answer 1

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

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

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

body {
    background: #fff;
}

.div{
 position:relative;
}
.box {
background: #f7f7f7;
height: 178px;
width: 409px;
margin: 25px;
/*padding: 20px;*/
position: relative;
overflow: hidden;
border: 1px solid #ccc;
border-left: 0px;
}
.box:before {
content: "";
display: block;
background: #fff;
position: absolute;
top: -33px;
left: -263px;
width: 300px;
height: 242px;
border-radius: 300px;
border: 1px solid #ccc;
}

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

进行测试

<div class="div">
<div class="box"></div>
</div>

</body>
</html>

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

在测试无状态功能组件

1 个答案: