问题错误：不变违规：findAllInRenderedTree（...）：实例必须是复合组件

在JEST for React文件中编写测试用例时，我收到此错误。以下是我的示例代码：

search_basr_test.js

jest.autoMockOff();
global.React = require('react/addons');
jest.setMock('../stores/browser_store.jsx');
beforeEach(function() {
    var search_bar = require('../components/search_bar.jsx');
});
var TestUtils = React.addons.TestUtils;

describe("Test", function() {
    it("should render Test", function() {
            var test = TestUtils.renderIntoDocument(<search_bar/>);
            expect(test).toBeDefined();
    });
    it("renders a list in a box with proper CSS classes", function() {
            var test = TestUtils.renderIntoDocument(<search_bar/>);
            let box = TestUtils.findRenderedDOMComponentWithTag(test, "div");
            expect(box.className).toEqual("sidebar__collapse");
    });
});

search_bar.jsx

return (
        <div>
            <div
                className='sidebar__collapse'
                onClick={this.handleClose}
            >
                <span className='fa fa-angle-left'></span>
            </div>
            <span
                className='search__clear'
                onClick={this.clearFocus}
            >
                {'Cancel'}
            </span>
}

有谁在那帮助我？

5427

2017-12-23 10:38

起源

同样的问题，你修好了吗？ - novaline

答案:

复合组件是包含React组件的组件（不是div，span，...）方法'findRenderedDOMComponentWithTag'将参数作为复合组件。

尝试直接在您的情况下解析组件（jquery，js，...），因为它不是复合组件

2017-12-30 10:11

这已经很晚了，但我刚刚遇到这个问题，而且我没有找到一个很好的答案。

我的解决方案是在测试文件中创建一个包装器组件

import { Component } from "react";
class Wrapper extends Component {
  render() {
    return <YourComponent {...this.props} />
  }
}

而不是打电话

TestUtils.renderIntoDocument(
    <YourComponent />
);

呼叫

TestUtils.renderIntoDocument(
    <Wrapper />
);

这样做可确保组件是复合组件，而不是无状态功能。

希望这对未来的其他人有所帮助！

2017-10-24 03:16

这么多谷歌搜索，我终于找到了解决方案。谢谢！！ - randallreedjr

问题 错误：不变违规：findAllInRenderedTree（...）：实例必须是复合组件

答案:

热门问题

问题错误：不变违规：findAllInRenderedTree（...）：实例必须是复合组件