Angular 1.x與Jest的快照測試

Question

我想使用Jest快照測試我的angular 1.x指令。 我已經有了一個有效的測試環境，但我不確定如何（以及如果可以）快照測試我的指令/組件。

我不認爲我可以使用在這個例子中使用的渲染器對象（看起來像一個反應特定的對象）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我找不到任何有關快照測試的答案。

由於提前，

費德里科

Answer 1

它的工作原理。

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> 
`;