reactjs - react - Error: Infracción invariable: findAllInRenderedTree(...): instancia debe ser un componente compuesto

jest react native

Question

Al escribir el caso de prueba en JEST para el archivo React, recibo este error. A continuación está mi código de muestra:

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>
}

¿Alguien por ahí para ayudarme con esto?

Answer 1

Un componente compuesto es un componente que contiene un componente reactivo (no div, span, ...) El método ''findRenderedDOMComponentWithTag'' toma el parámetro de un componente compuesto.

Intente analizar el componente directamente en su caso (jquery, js, ...) porque no es un compuesto

Answer 2

Esto es tarde, pero me encontré con esto, y no encontré una gran respuesta para eso.

Mi solución fue hacer un componente envoltorio en el archivo de prueba

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

y en lugar de llamar

TestUtils.renderIntoDocument(
    <YourComponent />
);

llamada

TestUtils.renderIntoDocument(
    <Wrapper />
);

Hacer esto asegura que su componente es un componente compuesto y no es una función sin estado.

Espero que esto ayude a cualquier otra persona en el futuro.