Errore: violazione invariante: findAllInRenderedTree (...): l'istanza deve essere un componente composito

Question

Durante la scrittura del caso di test in JEST per il file React viene visualizzato questo errore. Di seguito è riportato il mio codice di esempio:

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

Qualcuno là fuori per aiutarmi a uscire da questa ??

Answer 1

Un componente composito è un componente che contiene React Component (non div, span, ...) Il metodo 'findRenderedDOMComponentWithTag' accetta nel parametro un componente composito.

Cercare di analizzare il componente direttamente nel tuo caso (jquery, js, ...) perché non è un composito uno

Answer 2

Questo è in ritardo, ma ho appena imbattuto in questo, e non ho trovato una grande risposta per questo.

La mia soluzione era di fare un componente wrapper nel file di test

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

e invece di chiamare

TestUtils.renderIntoDocument(
    <YourComponent /> 
); 

chiamata

TestUtils.renderIntoDocument(
    <Wrapper /> 
); 

In questo modo si assicura che il componente è un componente composito e non è una funzione senza stato.

Spero che questo aiuti chiunque altro in futuro!