Question

我在vue中有一个方法，该方法进行服务调用并获取URL，然后将其重定向到该URL。看起来差不多

mounted () {

      StudentServices.getCollegeurl(this.studentId)
        .then(response => {
          window.location.href = response.data.collegeurl
        })
        .catch(response => {
          this.errorMessage = 'errr'
        })

  }

我嘲笑了StudentServices，我可以伪造url。.但是在开玩笑的测试中，我想验证window.location.href是否能从服务调用中得到……我该怎么办？

Answer 1

由于jsdom#unimplemented-parts-of-the-web-platform，我们从此问题中知道：window.location.href can't be changed in tests.

我们需要对代码进行一些更改，这是解决方案：

index.ts：

import { StudentServices } from './StudentServices';

export class PornClass {
  private errorMessage: string = '';
  constructor(private studentId: string) {}

  public async mounted() {
    return StudentServices.getCollegeurl(this.studentId)
      .then(response => {
        // window.location.href = response.data.collegeurl;
        Object.defineProperty(window, 'location', {
          value: {
            href: response.data.collegeurl
          }
        });
      })
      .catch(response => {
        this.errorMessage = 'errr';
      });
  }
}

StudentServices.ts：

export class StudentServices {
  public static async getCollegeurl(id: string) {
    return {
      data: {
        collegeurl: 'real url'
      }
    };
  }
}

index.spec.ts：

import { PornClass } from './';
import { StudentServices } from './StudentServices';

jest.mock('./StudentServices.ts', () => {
  const mockedStudentServices = {
    getCollegeurl: jest.fn()
  };
  return {
    StudentServices: mockedStudentServices
  };
});

describe('PornClass', () => {
  describe('#mounted', () => {
    it('should get college url and redirect correctly', async () => {
      const studentId = '1';
      const collegeurl = 'http://github.com/mrdulin';
      const porn = new PornClass(studentId);
      (StudentServices.getCollegeurl as jest.MockedFunction<
        typeof StudentServices.getCollegeurl
      >).mockResolvedValueOnce({ data: { collegeurl } });

      await porn.mounted();
      expect(StudentServices.getCollegeurl).toBeCalledWith(studentId);
      expect(window.location.href).toBe(collegeurl);
    });
  });
});

带有覆盖率报告的单元测试结果：

 PASS  src/stackoverflow/56482707/index.spec.ts
  PornClass
    #mounted
      ✓ should get college url and redirect correctly (8ms)

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |       90 |      100 |       80 |    88.89 |                   |
 index.ts |       90 |      100 |       80 |    88.89 |                18 |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.815s

以下是完整的演示：https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/56482707

如何在玩笑测试中验证window.location.href

1 个答案: