2017-04-24 10 views
6

मैं अपने प्रतिक्रिया घटक प्रस्तुत करने का प्रयास करने की कोशिश करता हूं, लेकिन अगली त्रुटि प्राप्त कर रहा हूं: Invariant उल्लंघन: _registerComponent (...): लक्ष्य कंटेनर नहीं है डोम तत्व त्रुटि मौजूद नहीं है अगर मैं उस स्थान को बदलता हूं जहां दस्तावेज़ पर मेरा घटक प्रस्तुत करता है, और यह मौजूद है यदि यह स्थान शरीर में कुछ आईडी के साथ कुछ div है। यहाँ मेरी घटक:टेस्ट सूट चलाने में विफल रहा। Invariant उल्लंघन: _registerComponent (...): लक्ष्य कंटेनर एक DOM तत्व नहीं है

import React, {Component} from 'react'; 
{render} from 'react-dom'; 
import Demo from './demo/demo' 
import Demo2 from './demo2/demo2' 
require('./app-styles.sass') 

export class App extends Component { 
render() { 
    return (
      <div> 
       <Demo2 /> 
       <Demo /> 
       <div>Hello jest from react</div> 
      </div> 
     ); 
    } 
} 
render(<App/>, document.getElementById('helloWorldRoot')); 

यहाँ इस घटक

import React from 'react' 
import {shallow, mount} from 'enzyme' 
import {App} from './app' 

describe('base component',() => { 
    it('renders as a div',() => { 
    const application = shallow(<App />); 
    expect(application).toMatchSnapshot(); 
    }); 
}); 

और यहाँ की कसौटी पर मेरी एचटीएमएल है:

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Hello jests' tests</title> 
     <link rel="stylesheet" href="dist/app.css"> 
    </head> 

    <body> 
     <div id="helloWorldRoot"></div> 
     <script type="text/javascript" src="dist/app.js"></script> 
    </body> 

कौन मुझे बता सकते हैं क्या समस्या हो सकती है ? मुझे कुछ सलाह खुशी होगी।

पीएस टेस्ट जेस्ट द्वारा लिखा गया है। मैं अपनी अंग्रेजी के लिए माफी चाहता हूँ।

उत्तर

2

आप जिस फ़ाइल का परीक्षण कर रहे हैं, app.js, अंतिम पंक्ति में ID helloWorldRoot के साथ एक DOM तत्व खोजने का प्रयास कर रहा है। यह डीओएम तत्व अस्तित्व में नहीं है जब तत्व एंजाइम द्वारा प्रदान किया जा रहा है - इसलिए त्रुटि संदेश।

इसे ठीक करने के लिए, <App /> घटक को अलग करें और इसे दो फ़ाइलों में प्रस्तुत करें। सुनिश्चित करें कि फ़ाइल जो DOM को एप्लिकेशन को माउंट करती है (चलिए इसे main.js कहते हैं) यह केवल एक चीज है और कुछ भी नहीं। दूसरी फ़ाइल, app.js, तब जेस्ट और एंजाइम का उपयोग करके परीक्षण किया जा सकता है।

import React from 'react'; 
import { render } from 'react-dom'; 
import App from './app'; 

render(<App/>, document.getElementById('helloWorldRoot')); 

और निश्चित रूप से इसी तर्ज app.js से हटाया जाना चाहिए:

तो main.js से अधिक नहीं करना चाहिए।

+0

thx आप अपने उत्तर के लिए, लेकिन मुझे खेद है, मैं समझ नहीं पा रहा हूं कि यह कैसे काम करता है " घटक अलग करें और इसे दो फाइलों में प्रस्तुत करना" या यहां तक ​​कि यह कैसा दिखना चाहिए। क्या आप मुझे अपने विचार का एक छोटा उदाहरण लिख सकते हैं? – Ahcael

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