0

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

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

我读到了一些框架，比如 chai，它们非常轻量级且速度非常快，因为我不必等待页面加载。

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

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

如果您知道，请向我建议任何其他方法。

4

1 回答 1

5

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

Karma 是测试运行器的一个示例

Mocha 是一个测试框架的例子

Chai 是一个断言库的例子

Sinon 是一个测试插件的例子

酶是元素选择的一个例子。（类似于 Jquery）

业力：试跑者

Karma 是一种测试运行器，它创建一个假服务器，然后使用从该假服务器派生的数据在各种浏览器中启动测试。Karma 只是一个测试运行器，需要像 Mocha 这样的测试框架插入它才能真正运行测试。

我使用了 webpack + karma.conf.js 文件。设置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 有许多很酷的功能，可以让您真正深入到源代码的角落和缝隙中，看看引擎盖下到底发生了什么。

您也可以将 spy 函数用于事件处理程序

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

于 2017-03-15T05:45:32.153 回答