2015-12-23 12 views
11

प्रतिक्रिया फ़ाइल के लिए जेईटी में परीक्षण केस लिखते समय मुझे यह त्रुटि मिल रही है। पीछा कर रहा है मेरी नमूना कोड:त्रुटि: Invariant उल्लंघन: findAllInRenderedTree (...): उदाहरण एक समग्र घटक होना चाहिए

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

किसी को भी वहाँ बाहर इस से मुझे मदद करने के लिए ??

+0

वही समस्या, क्या आपने इसे ठीक किया? – novaline

उत्तर

5

एक समग्र घटक एक घटक है जिसमें प्रतिक्रिया घटक (div, span, ...) विधि 'findRenderedDOMComponentWithTag' पैरामीटर में एक समग्र घटक लेता है।

कोशिश अपने मामले में सीधे घटक पार्स करने के लिए (jQuery, जे एस, ...), क्योंकि यह नहीं एक समग्र एक

4

यह देर हो चुकी है, लेकिन मैं सिर्फ इस में भाग है, और मैं नहीं मिला है इसके लिए एक महान जवाब।

मेरे समाधान परीक्षण फ़ाइल में एक आवरण घटक बनाने के लिए

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

था और इसके बजाय बुला

TestUtils.renderIntoDocument(
    <YourComponent /> 
); 

कॉल

TestUtils.renderIntoDocument(
    <Wrapper /> 
); 

यह सुनिश्चित करता है कि आपके घटक एक है करने की समग्र घटक और एक स्टेटलेस फ़ंक्शन नहीं है।

उम्मीद है कि यह भविष्य में किसी और की मदद करेगा!

+0

इतना गुगलिंग, और मैं अंत में समाधान पर पहुंचे। धन्यवाद!! – randallreedjr

संबंधित मुद्दे