反应应用单元测试

Question

我目前正在使用Selenium进行功能测试来测试React应用程序.Selenium用于在浏览器上启动应用程序,并模拟用户操作并在每一步保持断言/验证.

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

我读到了一些像chai这样非常轻量级且非常快的框架,因为我不必等待页面加载.

在类似的路线上,任何人都可以建议我做这个应用程序的完整功能测试的方法,我可以绕过UI动作(如Selenium所做),例如.我们可以通过代码加载反应组件并尝试模拟某些用户操作,然后从数据库执行功能验证,并且还有数据提供程序,而不是让selenium在UI上单击和模拟用户操作为了我的考试.例如 - 我有一组数据要传递给我的测试函数,这个测试将针对所有数据集运行并分别保持断言.

单元测试/白盒测试会有用吗？像chai这样的测试框架会帮助我满足这个要求吗？

如果你知道的话,建议我采取任何其他方法.

Answer 1

好的,这是我在项目中使用的测试堆栈.

Karma是测试运行员的一个例子

Mocha是测试框架的一个例子

Chai是断言库的一个例子

Sinon是测试插件的一个例子

酶是元素选择的一个例子.(与Jquery相似)

业力:测试赛跑者

Karma是一种测试运行器,它创建一个虚假服务器,然后使用从该虚假服务器派生的数据在各种浏览器中旋转测试.Karma只是一个测试运行器,并且需要一个测试框架(如Mocha)插入它以便实际运行测试.

我使用了webpack + karma.conf.js文件.要建立噶生态系统.您可以设置一个命令来观察编码时在parellel中运行的测试用例.

摩卡:测试框架

以下文件使用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;
    });
  });
});

区分摩卡和柴

我们可以通过查看它的内容来区分框架(Mocha)方法和断言库(Chai)方法.it块外的方法通常来自测试框架.it块中的所有内容都是来自断言库的代码.beforeEach,describe,context,it,都是从Mocha扩展的方法.期望,平等和存在,都是从柴延伸的方法.

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块中的任何内容都发生在比测试框架更低的抽象层次上的概念只是一种启发式,这只是一个经验法则.

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有很多很酷的功能,可以让你真正深入到源代码的角落和缝隙中,看看幕后真正发生了什么.

您也可以将间谍功能用于事件处理程序

认为这应该提供一个方向. 资源