反应应用程序单元测试

Question

我目前正在使用 Selenium 测试 React 应用程序以进行功能测试。 Selenium 用于在浏览器上启动应用程序，并模拟用户操作并在每一步保持 asserting/verifying。

然而，调试这些测试变得非常乏味，因为 UI 自动化很重，因为它必须实际启动浏览器，等待页面加载（在不稳定的环境下，这有时会很痛苦） .

我了解了一些框架，例如 chai，它们非常轻巧且速度非常快，因为我不必等待页面加载。

在类似的线路上，任何人都可以建议我如何对这个应用程序进行完整的功能测试，我可以绕过 UI 操作（如 Selenium 所做的那样），例如。不是让 selenium 在 UI 上绕过点击和模拟用户操作，有什么方法可以加载反应组件并尝试通过代码模拟某些用户操作，然后从数据库进行功能验证和也有数据提供者供我测试。例如-我有一组数据要传递给我的测试函数，这个测试将为所有数据集运行并分别保持断言。

单元 testing/white 盒测试之类的东西会起作用吗？像 chai 这样的测试框架可以帮助我满足这个要求吗？

如果你知道，请给我推荐任何其他方法。

Answer 1

好的，这就是我在我的项目中使用的测试堆栈。

Karma is an example of a test runner

Mocha is an example of a testing framework

Chai is an example of an assertion library

Sinon is an example of a testing plugin

Enzyme is an example for element selection. (Similar to Jquery)

业力：测试跑者

Karma 是一种测试运行ner，它创建一个假服务器，然后使用从该假服务器派生的数据在各种浏览器中启动测试。 Karma 只是一个测试运行ner，需要插入诸如 Mocha 之类的测试框架才能实际运行测试。

我使用 webpack + karma.conf.js 文件。 到 setup Karma 生态系统。您可以设置一个命令来在编码时并行观察测试用例运行。

Mocha：测试框架

以下文件使用 Mocha 作为测试框架，使用 Chai 作为断言库：

describe('the todo.App', function() {
  context('the todo object', function(){

    it('should have all the necessary methods', function(){
      var msg = "method should exist";
      expect(todo.util.trimTodoName, msg).to.exist;
      expect(todo.util.isValidTodoName, msg).to.exist;
      expect(todo.util.getUniqueId, msg).to.exist;
    });
  });
});

区分摩卡和柴

我们可以通过查看 it 块的内容来区分框架 (Mocha) 方法和断言库 (Chai) 方法。 it 块之外的方法通常来自测试框架。 it 块中的所有内容都是来自断言库的代码。 beforeEach、describe、context、it，都是从Mocha扩展而来的方法。 expect、equal、exist，都是Chai的扩展方法。

afterEach(function() {
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();
    $window.localStorage.removeItem('com.shortly');
});

it('should have a signup method', function() {
    expect($scope.signup).to.be.a('function');
});

所有与测试框架有关的方法都发生在it块之外，所有与断言库有关的方法都发生在it块内。因此我们可以得出结论，在 it 块内发生的任何事情确实发生在比测试框架更低的抽象层次上。

或者就我们的分类架构而言，it 块内发生的所有内容要么是断言库的一部分，要么是测试插件的一部分。 it 块中的任何内容都发生在比测试框架更低的抽象级别上的概念只是一种启发式的，也就是说 - 它只是一个经验法则。

Sinon：测试插件

Sinon 是一个挂接到 Chai 的插件，使我们能够执行更多样化的测试集。通过 Sinon 插件，我们可以创建模拟、存根和假服务器：

describe('API integration', function(){
  var server, setupStub, JSONresponse;

  beforeEach(function() {
    setupStub = sinon.stub(todo, 'setup');
    server = sinon.fakeServer.create();
  });

  it('todo.setup receives an array of todos when todo.init is called', function () {
  });

  afterEach(function() {
    server.restore();
    setupStub.restore();
  });
});

Sinon 有很多很酷的功能，可以让您真正深入到源代码的各个角落，看看幕后到底发生了什么。

您也可以为事件处理程序使用间谍功能

认为这应该提供了一个方向。 Source

反应应用程序单元测试

React Application Unit Testing

unit-testing

reactjs

jasmine

chai

white-box-testing