角11 - .then方法中的Jest单元测试方法

Question

我正在运行角11中的jest单元测试，并尝试在.then方法中测试方法。

但是，测试方法似乎没有在expect方法上运行。

我应该如何编写测试代码直到.then方法结束？

我想检查idToken是在localStorage中.then方法中设置的。

版本：

// package.json

"dependencies": {
    "@angular/animations": "~11.0.4",
    "@angular/cdk": "^11.2.2",
    "@angular/common": "~11.0.4",
    "@angular/compiler": "~11.0.4",
    "@angular/core": "~11.0.4",
    "@angular/forms": "~11.0.4",
    "@angular/material": "^11.2.2",
    "@angular/platform-browser": "~11.0.4",
    "@angular/platform-browser-dynamic": "~11.0.4",
    "@angular/router": "~11.0.4",
    ...
},
"devDependencies": {
    "@angular-builders/jest": "^12.1.2",
    "@angular-devkit/build-angular": "~0.1100.4",
    "@angular-jest/schematics": "0.2.0",
    "@angular/cli": "~11.0.4",
    "@angular/compiler-cli": "~11.0.4",
    "@angular/localize": "^11.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jest": "^26.0.24",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "jest": "^27.0.6",
    "jest-preset-angular": "^9.0.7",
    ...
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
}

组件法：

// my-component.ts

signIn() {
  this.userService.fetchIdToken()  // return Promise(resolve => idToken)
    .then(idToken => {
      localStorage.setItem('idToken', idToken); // trying to test idToken is correctly set.
      ...
    });
}

测试代码：

// my-component.spec.ts

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  let loader: HarnessLoader;
  let userService: jest.Mocked<UserService>;
  const userServiceSpy = {} as UserServiceSpy;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [MyComponent],
      imports: [
        HttpClientTestingModule,
      ],
      providers: [
        { provide: ComponentFixtureAutoDetect, useValue: true },
        UserService,
      ],
    }).compileComponents();
    fixture = TestBed.createComponent(MyComponent);
    loader = TestbedHarnessEnvironment.loader(fixture);
    component = fixture.componentInstance;
    fixture.detectChanges();
    userService = TestBed.inject(UserService) as jest.Mocked<UserService>;
    userServiceSpy.fetchIdToken = jest.spyOn(userService, 'fetchIdToken');
  });

  describe('script', () => {
    
    describe('fetchIdToken', () => {
      it('ok', fakeAsync(() => {
        userServiceSpy.fetchIdToken.mockImplementation(() => 
          new Promise(() => 'idToken')
        );
        component.signIn();
        tick(); // wait until Promise is resolved. -> not working
        expect(userServiceSpy.signIn).toHaveBeenCalled(); // OK
        expect(localStorage.getItem('idToken')).toEqual('idToken'); // NG
      }));
    });

  });
});

运行命令：

$ jest --runInBand --watch

结果：

  ● MyComponent › script › fetchIdToken › ok

    expect(received).toEqual(expected) // deep equality

    Expected: "idToken"
    Received: null

      171 |         tick(); // wait until Promise is resolved. -> not working
      172 |         expect(userServiceSpy.fetchIdToken).toHaveBeenCalled();
    > 173 |         expect(localStorage.getItem('idToken')).toEqual('idToken');
          |                                                 ^
      174 |       }));
      175 |     });
      176 |   });

Answer 1

如果您想在所有测试中模拟本地存储，请在beforeEach()函数中声明它。

let localStore;

beforeEach(() => {
  localStore = {};

  spyOn(window.Storage.prototype, 'getItem').and.callFake((key) =>
    key in localStore ? localStore[key] : null
  );
});

或

let localStore;

beforeEach(() => {
  localStore = {};

  spyOn(window.localStorage, 'getItem').and.callFake((key) =>
    key in localStore ? localStore[key] : null
  );
});

Answer 2

我认为您需要将令牌服务的模拟修改为这样的内容：

    userServiceSpy.fetchIdToken.mockImplementation(() => 
      new Promise((resolve) => resolve('idToken'))
    );