TestUtils.renderIntoDocument return null，如果声明为匿名函数

Question

我有两种代码变体：

FIRST（声明为 class）：

export default class COMPONENT_NAME extends React.Component{
    constructor(props){
    super(props);
    this.props = props;
    }
    ....
    render = () => <div className="clName"></div>
}

SECOND（声明为匿名函数）：

export default (props) => <div className="clName"></div>

笑话代码：

jest.dontMock('../js/components/COMPONENT_NAME/index');
const COMPONENT_NAME = require('../js/components/COMPONENT_NAME/index.js').default;
var loaderComponent;
...
...
function renderComponent() {
    loaderComponent = TestUtils.renderIntoDocument(
    <COMPONENT_NAME />
    );
}

为什么测试只在第一种情况下有效？

第二种情况renderIntoDocument return null。我找不到任何相关信息。

所以问题是 - JEST 是否支持呈现匿名函数？

Answer 1

在将功能组件传递给 TestUtils.renderIntoDocument 函数时，您应该将其包装到 div 中：

function renderComponent() {
    loaderComponent = TestUtils.renderIntoDocument(
        <div>
            <COMPONENT_NAME />
        </div>
    );
}

Answer 2

尝试更改

jest.dontMock('../js/components/COMPONENT_NAME/index');

到

jest.unmock('../js/components/COMPONENT_NAME/index');

TestUtils.renderIntoDocument return null，如果声明为匿名函数

TestUtils.renderIntoDocument return null, if it declared as anonymous function

javascript

testing

reactjs

jestjs