2017-11-16 82 views
6

Jestem bardzo nowy, aby zareagować i napisałem kod używając React 14 bez żadnego transpilera. Teraz chcę użyć Karma-Jasmine do testowania jednostkowego, ale wygląda na to, że mój test kończy się renderowaniem aplikacji.Testowanie jednostek reaguje za pomocą Karmy i Jasmine

Mam następującą strukturę:

node_modules 
MyApp/ 
    /js/ *.js 
    /test/*.js 
Karma.conf.js 
package.json 
index.html 

Moja index.html:

<html> 
<div id="content"></div> 
<script src="js/react-0.14.7.js"></script> 
<script src="js/react-dom-0.14.7.js"></script> 

<script src="js/App.js"></script> 
<script src="js/main.js"></script> 
<link rel="stylesheet" href="style.css"> 
</body> 
</html> 

Moi main.js:

ReactDOM.render(React.createElement(App), document.getElementById('content')) 

My App potem jest jak poniżej:

var h = React.createElement; 

var Command = React.createClass({ 
    render: function(){ 
    return h(....) 
    } 
}) 

mojego kodu testu jest następująca:

describe('App', function() { 
beforeEach(function() { 
fixture.load('index.htm'); 
}); 

beforeEach(function() { 
ReactDOM.render(React.createElement(App), document.getElementById('content')); 
}); 

it('accepts elements', function() { 
    document.getElementById('x').value = 1; 
    document.getElementById('y').value = 2; 
    document.getElementById('setbtn').click(); 
}); 

}); 

I tu jest błąd:

Uncaught ReferenceError: App is not defined 
at main.js:2 
(anonymous) @ main.js:2 
debug.html:1 (WEB_PAGE context) Lazy require of app.binding did not set the binding field 
. 
. 
. 
ReferenceError: fixture is not defined 
at UserContext.<anonymous> (main.test.js:6) 

debugowanie Karma pokazuje moje pliki zostały załadowane jak widzę funkcje w moich komponentów. Zainstalowałem Html2js i dodałem do mojego pliku Karma.conf.js. Przeczytałem większość dokumentów w Internecie, ale nie pomogły.

Co robię źle? I

+0

'Uncaught ReferenceError: Aplikacja nie jest zdefiniowana' - wygląda na to, że eksportujesz ją jako globalną zmienną o nazwie" Command "zamiast" App ". Musisz również uwzględnić karma-fixture (patrz instrukcja instalacji na github.com/billtrik/karma-fixture). Na koniec Twój HTML jest zniekształcony. Brak tagu otwierającego ciało –

Odpowiedz

3

Czy używasz js-fixtures? Następnie trzeba napisać:

fixtures.load('index.htm'); // <--- fixtureS not fixture! 
+1

Nie, nie jestem. Używam tylko karmy i jaśminu. Czy mogę napisać test z tymi dwoma lub czy potrzebuję innego pakietu? – msc87

+1

czy możesz mi pomóc skonfigurować działającą jednostkę testową? – msc87

3

Mamy wiele narzędzi badawczych do testowania aplikacji reagować. Niektóre z nich mogą być mylące dla początkujących, aby zrozumieć, do czego dokładnie służą. Poniżej wyjaśniłem różne narzędzia i do czego są one głównie używane.

Chai

Jest to biblioteka twierdzenie/oczekiwanie. spodziewać się/powinien/potwierdzić to funkcja podana przez Chai.

Mocha/Jasmine

Jest biegaczem testy, używany do uruchamiania testów i rejestrować wyniki badań.

opis/it/beforeEach: funkcje mocha/jaśminu służą do organizowania testu.

opisać → opisać funkcję

to → określić, jakie są spełnione pewne warunki.Życie wewnątrz opisać

beforeEach → testów instalacyjnych przed rozpoczęciem

Przykładem testu:

describe "Strawberry" 
    - it "is red" 
    - expect(strawberry.color).to.be('red') 
- it "a type of fruit" 
    - expect(strawberry.type).to.be('fruit) 

enzymu

JavaScript narzędzie do testowania React to sprawia, że ​​łatwiej potwierdź, manipuluj i przemierzaj swoje Komponenty Reagujące. Symuluje ReactDOM i reaguje na komponenty takie jak JQuery znajdując DOM.

Może być używany do płytkich renderów. Reaguj na komponenty lub sprawdź, czy komponenty mają określone dzieci lub czy mają określone rekwizyty.

import MyComponent from ‘./MyComponent’; 
import Foo from ‘./Foo’; 

describe(‘<MyComponent />’,() => { 
    it(‘renders three <Foo /> components’,() => { 
    const wrapper = shallow(<MyComponent foo=’bar’ />); 
    expect(wrapper.find(Foo)).to.have.length(3); 
    expect(wrapper.props().foo).to.equal(‘bar’); 
    }); 
});