【问题标题】:React Application Unit TestingReact 应用程序单元测试
【发布时间】:2017-08-05 10:17:46
【问题描述】:

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

但是调试这些测试变得非常乏味,因为 UI 自动化很繁重,因为它必须实际启动浏览器,等待页面加载(考虑到不稳定的环境,这有时会很痛苦)。

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

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

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

如果你知道,请给我建议任何其他方法。

【问题讨论】:

    标签: unit-testing reactjs jasmine chai white-box-testing


    【解决方案1】:

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

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

    Mocha 是一个测试框架的例子

    Chai 是一个断言库的例子

    Sinon 是一个测试插件的例子

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

    因果报应:测试运行者

    Karma 是一种测试运行器,它创建一个假服务器,然后使用来自该假服务器的数据在各种浏览器中启动测试。 Karma 只是一个测试运行器,需要像 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 有许多很酷的功能,可让您真正深入到源代码的各个角落,看看到底发生了什么。

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

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

    【讨论】:

    • 哇!感谢您的详细解释!
    • 我是否可以使用 Protractor 启动浏览器,然后使用一些单元测试概念来进行 UI 部分自动化?因此,与其等待量角器到处点击/填充数据/选择复选框等,我可以通过加载这些反应组件来执行这些任务,就像这样-stackoverflow.com/questions/40091000/…
    • @GloriaRampur 我不确定量角器。但是您可以将 PhantomJs 用于无头浏览器并在终端本身中运行测试用例。像这样的东西 - gist.github.com/swapnil-webonise/…
    • @GloriaRampur 在第二次阅读时,我不太明白上述评论的意思。您希望如何在测试用例中通过 ref?
    • 谢谢,我也会研究一下 PhantomJS 选项。
    猜你喜欢
    • 2016-02-27
    • 1970-01-01
    • 2015-08-13
    • 2022-10-14
    • 1970-01-01
    • 1970-01-01
    • 2017-01-30
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多