Test paketi çalıştırılamadı. Değişken İhlali: _registerComponent (...): Hedef kapsayıcı bir DOM öğesi değil

Bir sonraki hatayı almayı denedim, ancak bir sonraki hatayı almayı deneyin: Değişken İhlal: _registerComponent (...): Hedef kapsayıcı bir DOM öğesi. Bileşenimi document.body üzerinde oluşturduğum yeri değiştirirseniz ve bu yerin vücutta bir miktar kimliğe sahip bir div olması durumunda hata olmaz. İşte benim bileşen: Bu bileşen buradaTest paketi çalıştırılamadı. Değişken İhlali: _registerComponent (...): Hedef kapsayıcı bir DOM öğesi değil

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(); 
    }); 
});

İşte

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'));

testi Benim html: Sorun ne olabilir bana söyleyebilir

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

? Bazı tavsiyelerde bulunmaktan mutluluk duyacağım.

P.S. Test Jest tarafından yazılmıştır. İngilizcem için özür dilerim.

kaynak

2017-04-24 Ahcael

Test ettiğiniz dosya, app.js, son satırda helloWorldRoot numaralı bir DOM öğesi bulmaya çalışıyor. Bu DOM öğesi, öğe Enzim tarafından oluşturulduğunda mevcut değil - dolayısıyla hata iletisi.

Bunu düzeltmek için, <App /> bileşenini ve bunun oluşturulmasını iki dosyaya ayırın. Uygulamayı DOM'a bağlayan dosyanın (bunu main.js olarak adlandırın) yalnızca bu bir şey ve başka bir şey yapmadığından emin olun. Diğer dosya, app.js, daha sonra Jest ve Enzim kullanılarak test edilebilir.

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

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

Ve tabii

gelen çizgileri app.js çıkarılmalıdır:

Yani main.js fazla yapmalıdır.

kaynak

2017-04-24 14:27:42 mthmulders

Cevabınız için teşekkür ederim, ama üzgünüm, nasıl çalıştığını anlayamıyorum " bileşenini ayırma ve iki dosyaya ayırma" ya da nasıl görünmesi gerektiği gibi. Bana düşüncenizin küçük bir örneğini yazar mısın? – Ahcael

Test paketi çalıştırılamadı. Değişken İhlali: _registerComponent (...): Hedef kapsayıcı bir DOM öğesi değil

cevap

İlgili konular