【问题标题】：Unit testing react using Karma and Jasmine单元测试使用 Karma 和 Jasmine 做出反应
【发布时间】：2018-04-29 23:36:00
【问题描述】：

我对 react 很陌生，我使用 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 中。我已经阅读了网络上的大部分文档，但它们没有帮助。

我做错了什么？我

【问题讨论】：

Uncaught ReferenceError: App is not defined - 似乎您将其导出为名为“Command”而不是“App”的全局变量。此外，您需要包含 karma-fixture（请参阅 github.com/billtrik/karma-fixture 上的安装说明）。最后，您的 html 格式错误。没有开始正文标签

标签： javascript reactjs unit-testing jasmine karma-jasmine

【解决方案1】：

我们有许多测试工具来测试 React 应用程序。其中一些可能会让初学者感到困惑，无法理解它们的确切用途。下面我阐明了不同的工具以及它们的主要用途。

柴

这是一个断言/期望库。 expect/should/assert 是 chai 给出的函数。

摩卡/茉莉花

这是一个测试运行器，用于运行您的测试并记录您的测试结果。

describe/it/beforeEach：mocha/jasmine 的函数用于组织您的测试。

describe → 描述一个函数

it → 指定满足哪些特定条件。生活在描述中

beforeEach → 在开始之前设置测试

测试示例：

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 组件，或者检查组件是否有某些子组件或它们是否有某些 props。

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

【讨论】：

【解决方案2】：

你在使用js-fixtures吗？然后你需要写：

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

【讨论】：

不，我不是。我只使用 Karma 和 Jasmine。我可以用这两个写一个测试还是需要另一个包？
你能帮我建立一个工作测试单元吗？