msc*_*c87 4 javascript unit-testing jasmine reactjs karma-jasmine
我是个新手，我已经使用React 14编写了没有任何编译器的代码。现在，我想使用Karma-Jasmine进行单元测试，但是看来我的测试未能呈现该应用程序。
我有以下结构：
node_modules
MyApp/
/js/ *.js
/test/*.js
Karma.conf.js
package.json
index.html
我的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>
我的main.js：
ReactDOM.render(React.createElement(App), document.getElementById('content'))
我的应用程序如下所示：
var h = React.createElement;
var Command = React.createClass({
render: function(){
return h(....)
}
})
我的测试代码如下：
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();
});
});
这是错误：
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)
调试Karma显示我的文件已加载，因为我可以看到组件中的功能。我安装了Html2js并将其添加到我的Karma.conf.js中。我已经阅读了网络上的大多数文档，但它们没有帮助。
我究竟做错了什么？一世
我们有很多测试工具来测试React应用程序。对于初学者来说，其中的一些可能会使他们难以理解它们的确切用途。下面，我阐明了不同的工具及其主要用途。
这是一个断言/期望库。期望/应该/声明是柴给定的功能。
这是一个测试运行程序，用于运行测试和记录测试结果。
describe / it / beforeEach：mocha / jasmine的功能用于组织测试。
描述？描述一个功能
呢？指定满足某些条件的条件。生活在描述中
之前？开始之前进行安装程序测试
测试示例：
describe "Strawberry"
- it "is red"
- expect(strawberry.color).to.be('red')
- it "a type of fruit"
- expect(strawberry.type).to.be('fruit)
用于React的JavaScript测试实用程序，使声明，操作和遍历React组件变得更加容易。它模拟ReactDOM，以及类似JQuery的React组件查找DOM。
它可以用于浅化渲染React组件，或者检查组件是否具有某些子代或它们是否具有某些道具。
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’);
});
});
你在使用js-fixtures吗？然后你需要写：
fixtures.load('index.htm'); // <--- fixtureS not fixture!
| 归档时间： |
|
| 查看次数： |
2163 次 |
| 最近记录： |