Tôi rất mới để phản ứng và tôi đã viết một mã sử dụng React 14 mà không có bất kỳ trình chuyển đổi nào. Bây giờ tôi muốn sử dụng Karma-Jasmine để thử nghiệm đơn vị nhưng có vẻ như thử nghiệm của tôi không hiển thị ứng dụng.Thử nghiệm đơn vị phản ứng bằng cách sử dụng Karma và Jasmine

Tôi có cấu trúc sau:

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

index.html của tôi:

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

main.js của tôi:

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

My App sau đó là như dưới đây:

var h = React.createElement; 

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

mã kiểm tra của tôi là như sau:

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

});

Và đây là lỗi:

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)

Debugging Karma lãm tác phẩm của tôi đã được nạp như tôi có thể nhìn thấy các chức năng trong thành phần của tôi. Tôi đã cài đặt Html2js và thêm vào Karma.conf.js của mình. Tôi đã đọc hầu hết các tài liệu trên web nhưng chúng không giúp ích gì.

Tôi đang làm gì sai? Tôi

Nguồn

2017-11-16 msc87

'Tham chiếu không bắt buộcLỗi: Ứng dụng không được xác định' - có vẻ như bạn đang xuất nó dưới dạng biến toàn cục có tên" Lệnh "thay vì" Ứng dụng ". Ngoài ra, bạn cần phải bao gồm karma-fixture (xem hướng dẫn cài đặt tại github.com/billtrik/karma-fixture). Cuối cùng, html của bạn không đúng định dạng. Không có thẻ body mở nào –

Bạn đang sử dụng js-fixtures? Sau đó, bạn cần phải viết:

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

Nguồn

2017-11-16 13:34:22 bitwikinger

Không, tôi không có. Tôi chỉ sử dụng Karma và Jasmine. Tôi có thể viết một bài kiểm tra với hai hoặc tôi cần một gói khác? – msc87

bạn có thể giúp tôi thiết lập một đơn vị kiểm tra làm việc không? – msc87

Chúng tôi có nhiều công cụ kiểm tra để kiểm tra ứng dụng React. Một số người trong số họ có thể gây nhầm lẫn cho người mới bắt đầu để hiểu chính xác những gì họ được sử dụng cho. Dưới đây tôi làm rõ các công cụ khác nhau và những gì chúng được sử dụng chủ yếu cho.

Chai

Đây là một thư viện khẳng định/mong đợi. mong đợi/nên/khẳng định là chức năng được đưa ra bởi chai.

Mocha/Jasmine

Đây là một Á hậu kiểm tra, dùng để chạy thử nghiệm của bạn và đăng nhập kết quả xét nghiệm của bạn.

mô tả/it/beforeEach: chức năng của mocha/jasmine được sử dụng để tổ chức kiểm tra của bạn.

mô tả → Mô tả một hàm

nó → xác định những điều kiện nhất định được đáp ứng.Cuộc sống bên trong mô tả

beforeEach → kiểm tra cài đặt trước khi nó bắt đầu

Một ví dụ về kiểm tra:

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

Enzyme

tiện ích thử nghiệm JavaScript cho Phản ứng mà làm cho nó dễ dàng hơn để khẳng định, thao tác và đi qua các Thành phần Phản ứng của bạn. Nó mô phỏng ReactDOM, và React Components như JQuery tìm DOM.

Nó có thể được sử dụng để làm cạn các thành phần phản ứng, hoặc kiểm tra xem các thành phần có trẻ em nhất định hoặc nếu chúng có đạo cụ nhất định.

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

Nguồn

2017-11-25 15:32:30

Thử nghiệm đơn vị phản ứng bằng cách sử dụng Karma và Jasmine

Trả lời

Chai

Mocha/Jasmine

Enzyme

Các vấn đề liên quan