使用Jest对Angular 1.x进行快照测试

时间:2017-06-15 12:06:11

标签: angularjs testing snapshot jest

我想用Jest快照测试我的angular 1.x指令。 我已经开始使用jest工作的测试环境,但我不确定如何(如果可以的话)快照测试我的指令/组件。

我认为我不能使用此示例中使用的渲染器对象(看起来像特定于反应的对象)http://facebook.github.io/jest/docs/en/snapshot-testing.html#content并且我不确定如何使用.toJSON()函数以便序列化我的指令/组件。

这是我在Jest + Angular 1.x使用中找到的唯一链接: https://medium.com/aya-experience/testing-an-angularjs-app-with-jest-3029a613251我无法找到有关快照测试的任何答案。

提前致谢,

费德里科

1 个答案:

答案 0 :(得分:2)

有效。

<强> test.js

const angular = require('angular');
require('angular-mocks');

describe('Renderer', () => {
  let element;
  let scope;

  beforeEach(
    angular.mock.inject(($rootScope, $compile) => {
      scope = $rootScope.$new();
      element = $compile(
        '<div><label ng-show="label.show">1</label><label ng-hide="label.show">2</label></div>'
      )(scope);
      scope.$digest();
    })
  );

  it('should render the element', () => {
    expect(element).toBeDefined();
    expect(element[0]).toMatchSnapshot();
  });
});

<强>快照

exports[`Renderer should render the element 1`] = `
<div
  class="ng-scope"
>
  <label
    class="ng-hide"
    ng-show="label.show"
  >
    1
  </label>
  <label
    ng-hide="label.show"
  >
    2
  </label>
</div>
`;