Ошибка: инвариантное нарушение: findAllInRenderedTree (...): экземпляр должен быть составным компонентом

При написании тестового примера в JEST для файла 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>
}

Кто-нибудь там, чтобы помочь мне в этом?

Ответы

Ответ 1

Компонентный компонент - это компонент, содержащий компонент React (не div, span,...) Метод findRenderedDOMComponentWithTag принимает параметр составной компонент.

Попробуйте разобрать компонент непосредственно в вашем случае (jquery, js,...), потому что он не является составным.

Ответ 2

Это поздно, но я просто столкнулся с этим, и я не нашел для него отличного ответа.

Мое решение состояло в том, чтобы сделать компонент оболочки в тестовом файле

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

и вместо вызова

TestUtils.renderIntoDocument(
    <YourComponent />
);

вызов

TestUtils.renderIntoDocument(
    <Wrapper />
);

Выполнение этого гарантирует, что ваш компонент является составным компонентом и не является функцией без состояния.

Надеюсь, это поможет кому-то еще в будущем!