前端单测 jest 前端测试项目

转载

mob64ca140761a4 2024-04-22 22:06:51

文章标签 前端单测 jest 数组 Angular ide 文章分类 架构后端开发

jest提供覆盖率报告等开发者所需要的所有测试工具，jest是一款几乎零配置的测试框架。angular jest单元测试的写法为三步，引入测试内容，运行测试内容，最后进行比较，是否达到预期。jest中的断言使用expect, 它接受一个参数，就是运行测试内容的结果，返回一个对象，这个对象来调用匹配器 (toBe) ，匹配器的参数就是我们的预期结果，这样就可以对结果和预期进行对比了，也就可以判断对不对了。

两个必会的方法test方法：Jest封装的测试方法，一般填写两个参数，描述和测试方法，expect方法：预期方法，就是你调用了什么方法，传递了什么参数，得到的预期是什么。

1

toBe：绝对相等(=)

// 在src/functions.js中创建被测试的模块
export default {
  sum(a, b) {
    return a + b;
  }
}

// 在test/functions.test.js文件中创建测试用例
import functions  from '../src/functions';

test('sum(2 + 2) 等于 4', () => {
  expect(functions.sum(2, 2)).toBe(4);
})

not：允许你测试结果不等于某个值的情况

// 在src/functions.js中创建被测试的模块
export default {
  sum(a, b) {
    return a + b;
  }
}

// functions.test.js
import functions  from '../src/functions'

test('sum(2, 2) 不等于 5', () => {
  expect(functions.sum(2, 2)).not.toBe(5);
})

toEqual：简单类型绝对匹配；复杂类型内容结果的匹配

// functions.js
export default {
  getAuthor() {
    return {
      name: 'LITANGHUI',
      age: 24,
    }
  }
}
// functions.test.js
import functions  from '../src/functions';

test('getAuthor()返回的对象深度相等', () => {
  expect(functions.getAuthor()).toEqual(functions.getAuthor());
})

test('getAuthor()返回的对象内存地址不同', () => {
  expect(functions.getAuthor()).not.toBe(functions.getAuthor());
})

toHaveLength：方便的用来测试字符串和数组类型的长度是否满足预期

// functions.js
export default {
  getIntArray(num) {
    if (!Number.isInteger(num)) {
      throw Error('"getIntArray"只接受整数类型的参数');
    }

    let result = [];
    for (let i = 0, len = num; i < len; i++) {
      result.push(i);
    }
    
    return result;
  }
}
// functions.test.js
import functions  from '../src/functions';

test('getIntArray(3)返回的数组长度应该为3', () => {
  expect(functions.getIntArray(3)).toHaveLength(3);
})

toThorw：可能够让我们测试被测试方法是否按照预期抛出异常，但是在使用时需要注意的是：我们必须使用一个函数将将被测试的函数做一个包装，正如上面getIntArrayWrapFn所做的那样，否则会因为函数抛出导致该断言失败

// functions.test.js
import functions  from '../src/functions';

test('getIntArray(3.3)应该抛出错误', () => {
  function getIntArrayWrapFn() {
    functions.getIntArray(3.3);
  }
  expect(getIntArrayWrapFn).toThrow('"getIntArray"只接受整数类型的参数');
mockImplementation})

toBeNull()：匹配null
toBeUndefined()：匹配undefined
toBeDefined()：匹配非undefined
toBeTruthy()：匹配转化后为true
toBeFalsy()：匹配转化后为false
toBeGreaterThan()：相当于大于号
toBeLessThan()：相当于小于号
toBeGreaterThanOrEqual()：相当于大于等于号
toBeLessThanOrEqual()：相当于小于等于号
toBeCloseTo()：解决js浮点错误
toMatch(regExp/string)：用正则表达式或者字符串匹配字符串片段
toContain()：匹配数组或者Set中的某一项

2

进行单元测试时，要测试的内容依赖其他内容，比如异步请求，会依赖网络，很可能造成测试达不到效果。能不能把依赖变成可控的内容？这就用到mack。mack 就是把依赖替换成我们可控的内容，实现测试的内容和它的依赖项隔离。那怎么才能实现mock呢？使用mack 函数。在jest中，当我们谈论mack的时候，其实谈论的就是使用mack函数代替依赖。mack函数就是一个虚拟的或假的函数，所以对它来说，最重要的就是实现依赖的全部功能，从而起到替换的作用。通常，mock 函数会提供以下三个功能，来实现替换：函数的调用捕获，设置函数返回值，改变原函数的实现。在jest 创建一个mock 函数最简单的方法就是调用jest.fn() 方法。

2.1

捕获调用指的是这个函数有没有被调用，调用的参数是什么，返回值是什么，通常用于测试回调函数，模拟真实的回调函数。

// functions.js
export default {
  forEachFun: (array: any[], callback: Function) => {
    array.forEach((i) => callback(i));
  }
}
// functions.test.js
import functions  from '../src/functions';
test('forEachFun调用每个方法', () => {
  const mockFun = jest.fn();
  const testArr = [1, 2];
  functions.forEachFun(testArr, mockFun);
  console.log(mockFun.mock);
  // expect(mockFun.mock.calls.length).toBe(2);
  expect(mockFun).toHaveBeenCalled();
  expect(mockFun).toBeCalledTimes(2);
  expect(mockFun).toBeCalledWith(1);
  expect(mockFun).toBeCalledWith(2);
});
// mock函数mockFun属性是一个对象，打印结果：
{
　　calls: [ [ 1 ], [ 2 ] ],
　　instances: [ undefined, undefined ],
　　invocationCallOrder: [ 1, 2 ],
　　results:[ 
　　　　　　　　{ type: 'return', value: undefined },
　　　　　　　　{ type: 'return', value: undefined }
　　] 
}

calls 保存的就是调用状态。calls 是一个数组，每一次的调用都组成数组的一个元素，在这里调用了两次，就有两个元素。每一个元素又是一个数组，它则表示的是函数调用时的参数，因为每次的调用都传递了一个参数给函数，所以数组只有一项。如果有多个参数，数组就有多项，按照函数中的参数列表依次排列。这时候，就可以做断言，函数调用了几次，就判断 calls.length. expect(mockFun.mock.calls.length).toBe(2) 就是断言函数是不是调用了两次。expcet(mockFun.mock.calls[0][0]) .toBe(1)就是断言第一次调用的时候传递的参数是不是1. 可能觉得麻烦了，的确有点麻烦了，幸好，jest 对函数的mock参数进行了简单的封装，提供了简单的匹配器。

// 用来判断mock函数是否被掉用过
toHaveBeenCalled()/toBeCalled()
// 用来判断mock函数调用过几次
toHaveBeenCalledTimes(number)/toBeCalledTimes(number)
// 用来判断是否使用了特定参数调mock函数
toHaveBeenCalledWith(arg1,arg2,...)/toBeCalledWith(arg1,arg2,...)

有的时候，由于后端没有开发好，或网络问题，不想调用函数，直接获取到函数的返回值就可以了，比如异步函数, 直接返回一个Observable就好了，根本没有必要请求服务器。

test('设置函数返回值', () => {
  // 普通返回
  const mockFun = jest.fn();
  mockFun.
  const result: string = mockFun();
  expect(mockFun).toBeCalledTimes(1);
  expect(result).toEqual({name: 'shao'});
  // observable返回
  const observableFun = jest.fn();
  observableFun.mockReturnValue(of({name: 'shao'}));
  const observableResult: Observable<any> = observableFun();
  observableResult.subscribe((res) => {
    expect(res).toEqual({name: 'shao'});
  });
});

2.2

服务往往是最容易进行单元测试的文件。下面是一些针对 ValueService 的同步和异步单元测试，甚至不需要 Angular 测试工具的帮助。

// Straight Jasmine testing without Angular's testing support
describe('ValueService', () => {
  let service: ValueService;
  beforeEach(() => { service = new ValueService(); });

  it('#getValue should return real value', () => {
    expect(service.getValue()).toBe('real value');
  });

  it('#getObservableValue should return value from observable',
    () => {
    service.getObservableValue().subscribe(value => {
      expect(value).toBe('observable value');
    });
  });
});

服务通常依赖于angular 在构造函数中注入的其它服务。在很多情况下，调用服务的构造函数时，很容易手动创建和注入这些依赖。

// ValueService.ts
@Injectable({
  providedIn: 'root'
})
export class ValueService {
  value = 'real value';

  getValue(): string { return this.value; }
  setValue(value: string): void { this.value = value; }

  getObservableValue(): Observable<string> { return of('observable value'); }

  getPromiseValue(): Promise<string> { return Promise.resolve('promise value'); }

  getObservableDelayValue(): Observable<string> {
    return of('observable delay value').pipe(delay(10));
  }
}

// ValueService.spec.ts
export class FakeValueService extends ValueService {
  value = 'faked service value';
}

describe('MasterService without angular testing support', () => {
  let masterService: MasterService;

  it('#getValue 返回 service', () => {
    masterService = new MasterService(new ValueService());
    expect(masterService.getValue()).toBe('real value');
  });

  it('#getValue 使用 fakeServiece', () => {
    masterService = new MasterService(new FakeValueService());
    expect(masterService.getValue()).toBe('faked service value');
  });

  it('#getValue 使用 fake object', () => {
    const fake = { getValue: () => 'fake value' };
    masterService = new MasterService(fake as ValueService);
    expect(masterService.getValue()).toBe('fake value');
  });

  it('#getValue 返回 by a spy', () => {
    const valueService: ValueService = new ValueService();
    jest.spyOn(valueService, 'getValue').mockReturnValueOnce('test');
    masterService = new MasterService(valueService);
    expect(masterService.getValue()).toBe('test');
  });
});

第一个测试使用 new 创建了一个 ValueService，并把它传给了 MasterService 的构造函数。然而，注入真实服务很难工作良好，因为大多数被依赖的服务都很难创建和控制。还可以模拟依赖、使用仿制品，或者在相关的服务方法上创建一个测试间谍spyOn。

2.3

TestBed 是 Angular 测试实用工具中最重要的。 TestBed 创建了一个动态构造的 Angular 测试模块，用来模拟一个 Angular 的 @NgModule 。 TestBed.configureTestingModule() 方法接受一个元数据对象，它可以拥有 @NgModule的大部分属性。要测试某个服务，你可以在元数据属性 providers 中设置一个要测试或模拟的服务数组。

let masterService: MasterService;
let valueService: ValueService;

beforeEach(() => {
  TestBed.configureTestingModule({
    providers: [
      MasterService, ValueService
    ]
  });
  masterService = TestBed.inject(MasterService);
  valueService = TestBed.inject(ValueService);
});

测试带依赖的服务时，同时使用spyOn：

// value.service.ts
@Injectable()
export class MasterService {
  constructor(private valueService: ValueService) { }
  getValue(): string {
    return this.valueService.getValue();
  }
}
// value.service.spec.ts
describe('MasterService动态构建', () => {
  let masterService: MasterService;
  let valueService: ValueService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        MasterService, ValueService
      ]
    });
    masterService = TestBed.inject(MasterService);
    valueService = TestBed.inject(ValueService);
  });

  it('#getValue从spy返回', () => {
    const stubValue = 'stub value';
    jest.spyOn(valueService, 'getValue').mockReturnValue(stubValue);
    expect(masterService.getValue()).toBe(stubValue);
    expect(valueService.getValue).toBeCalledTimes(1);
    window.console.log(valueService.getValue);
    expect(valueService.getValue()).toBe(stubValue);
  });
});

Author: flysic

Created: 2021-10-24 Sun 22:26

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。