Реактивное тестирование приложений

Question

В настоящее время я тестирую приложение React с использованием Selenium для функционального тестирования. Selenium используется для запуска приложения в браузере, а также для имитации действий пользователя и подтверждения / подтверждения на каждом этапе.

Однако отладка этих тестов становится очень утомительной, поскольку автоматизация пользовательского интерфейса требует значительных усилий, поскольку она фактически должна запускать браузер, ждать загрузки страниц (что иногда является проблемой в нестабильных средах).

Я читал о некоторых фреймворках, таких как chai, которые очень легкие и очень быстрые, так как мне не нужно ждать загрузки страниц.

Аналогичным образом, может кто-нибудь предложить мне способы сделать полное функциональное тестирование этого приложения, где я могу обойти действия пользовательского интерфейса (например, Selenium), например. вместо того, чтобы делать селен, чтобы обходить щелчки и моделировать пользовательские действия в пользовательском интерфейсе, есть ли способ загрузить реагирующий компонент и попытаться смоделировать определенные пользовательские действия с помощью кода, а затем выполнить функциональную проверку из БД, а также иметь поставщиков данных для моего теста. Например, у меня есть набор данных для передачи в мою тестовую функцию, и этот тест будет выполняться для всего набора данных и будет продолжать утверждать соответственно.

Будет ли работать что-то вроде модульного тестирования / тестирования белого ящика? Поможет ли мне в этом тестирование фреймворков, таких как chai?

Предложите мне любой другой подход, если вы знаете.

Answer 1

Итак, это тестовый стек, который я использовал в своих проектах.

Карма - пример бегуна

Мокко является примером структуры тестирования

Чай является примером библиотеки утверждений

Sinon - пример тестового плагина

Фермент является примером для выбора элемента. (Аналогично Jquery)

Карма: тестовый бегун

Karma - это тип тестового прогона, который создает фальшивый сервер, а затем запускает тесты в различных браузерах, используя данные, полученные с этого фальшивого сервера. Карма - только бегун тестов, и для его запуска требуется интегрированная среда тестирования, такая как Mocha.

Я использовал файл webpack + karma.conf.js. настроить карму экосистему. Вы можете настроить команду, чтобы смотреть, как тестовые случаи выполняются в parellel во время кодирования.

Мокко: Тестирование Framework

В следующем файле 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;
    });
  });
});

Различают мокко и чай

Мы можем различить методы framework (Mocha) и методы библиотеки утверждений (Chai), посмотрев содержимое блока it. Методы вне блока it, как правило, выводятся из среды тестирования. Все в блоке it является кодом из библиотеки утверждений. beforeEach, description, 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, действительно происходит на более низком уровне абстракции, чем инфраструктура тестирования.

Или, с точки зрения нашей схемы классификации, все, что происходит внутри блоков 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 есть куча интересных функций, которые позволяют вам по-настоящему проникнуть в закоулки исходного кода и посмотреть, что на самом деле происходит под капотом.

Вы также можете использовать функцию шпиона для обработчиков событий

Думаю, это должно дать направление. Источник