使用 Jest 测试 ES6 的类 (class) 和对象 (object)
随着前端技术的不断进步，ES6 带来了许多新的特性，其中类和对象是其中一个变化最大的特性。在项目中使用 ES6 的类和对象能够让项目更好的结构化，并且提高代码的可读性。但是使用 ES6 的类和对象也会带来一些问题，如何测试？
本文将详细介绍如何使用 Jest 测试 ES6 的类和对象，包括类和对象的基础测试，继承和多态的测试，以及使用 Jest 的 Mock 功能进行测试。
基础测试
首先，我们需要学习如何测试 ES6 的类和对象的基础方法。在测试之前，需要安装 Jest 和 babel-jest。
npm i jest babel-jest --save-dev
接下来是一个简单的 Person 类的示例代码，我们将测试它的两个方法：
// javascriptcn.com 代码示例
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayName() {
console.log(this.name);
}
sayAge() {
console.log(this.age);
}
}测试用例代码如下：
// javascriptcn.com 代码示例
describe('Person', () => {
const p = new Person('Tom', 20);
it('should have correct name and age', () => {
expect(p.name).toEqual('Tom');
expect(p.age).toEqual(20);
});
it('should say correct name and age', () => {
console.log = jest.fn();
p.sayName();
p.sayAge();
expect(console.log).toHaveBeenCalledWith('Tom');
expect(console.log).toHaveBeenCalledWith(20);
});
});在上述示例代码中，我们使用 describe() 函数定义一个测试套件，使用 it() 函数定义一个测试用例。在测试用例中，我们使用 expect() 函数调用特定断言以检查结果是否符合预期。我们还使用 Jest 提供的模拟(console.log = jest.fn())，以确保在调用 sayName() 和 sayAge() 方法时控制台输出了正确的名称和年龄。
在控制台中运行以下命令，我们将看到测试结果：
// javascriptcn.com 代码示例
npm run test
PASS __tests__/person.test.js
Person
✓ should have correct name and age (4ms)
✓ should say correct name and age (3ms)
Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 1.506s
Ran all test suites matching /person.test.js/i.通过测试的结果告诉我们代码的正确性，这是我们进行下一步开发的根基。
继承和多态的测试
在 ES6 中使用类继承并且实现多态是一个很实用的设计技巧，它们也需要被测试。在这个示例中，我们将创建一个 Animal 类并扩展它到 Dog 和 Cat 类。
首先是 Animal 类：
// javascriptcn.com 代码示例
class Animal {
constructor(name) {
this.name = name;
}
sayName() {
console.log(this.name);
}
sayAnimalType() {
console.log('I am an animal.');
}
}接下来是 Dog 和 Cat 类：
// javascriptcn.com 代码示例
class Dog extends Animal {
sayAnimalType() {
console.log('I am a dog.');
}
}
class Cat extends Animal {
sayAnimalType() {
console.log('I am a cat.');
}
}最后，我们将编写测试用例以确保 Dog 和 Cat 类的行为符合预期。
// javascriptcn.com 代码示例
describe('Animal', () => {
it('should say correct animal type', () => {
const animal = new Animal('Animal');
console.log = jest.fn();
animal.sayAnimalType();
expect(console.log).toHaveBeenCalledWith('I am an animal.');
});
});
describe('Dog and Cat', () => {
it('should say correct animal type', () => {
const dog = new Dog('Dog');
const cat = new Cat('Cat');
console.log = jest.fn();
dog.sayAnimalType();
cat.sayAnimalType();
expect(console.log).toHaveBeenCalledWith('I am a dog.');
expect(console.log).toHaveBeenCalledWith('I am a cat.');
});
});这里，我们使用 Animal 类测试多态性，并检查它是否输出 "I am an animal."。接下来，我们对 Dog 和 Cat 类使用相同的方法并确保输出符合预期。
使用 Jest 的 Mock 功能进行测试
在实际的项目中，我们经常需要模拟数据和行为。此时就需要使用 Jest 的 Mock 功能进行测试。例如：模拟一个“假”数据。
// javascriptcn.com 代码示例
class Api {
async getInfo(id) {
const response = await axios.get(`http://example.com/api/info/${id}`);
return response.data;
}
}
class User {
constructor(api) {
this.api = api;
}
async getInfo(id) {
const info = await this.api.getInfo(id);
this.name = info.name;
this.age = info.age;
}
sayName() {
console.log(this.name);
}
sayAge() {
console.log(this.age);
}
}在测试中，我们需要 Mock axios 的 get() 方法以返回假数据以确保测试的可行性。
// javascriptcn.com 代码示例
describe('User', () => {
const api = new Api();
const user = new User(api);
it('should have correct name and age', async () => {
const mockData = { name: 'Tom', age: 20 };
axios.get = jest.fn().mockResolvedValue(mockData);
await user.getInfo(1);
expect(user.name).toBe('Tom');
expect(user.age).toBe(20);
});
it('should say correct name and age', () => {
console.log = jest.fn();
user.sayName();
user.sayAge();
expect(console.log).toHaveBeenCalledWith('Tom');
expect(console.log).toHaveBeenCalledWith(20);
});
});这里我们模拟了 axios 的 get() 方法然后提供了模拟数据作为返回值。接下来我们调用 getInfo() 方法并确保返回的名称和年龄与模拟的属性值匹配。
总结
在本文中，我们学习了如何使用 Jest 测试 ES6 的类和对象，包括基础测试，继承和多态的测试，以及使用 Jest 的 Mock 功能进行测试。
对于前端开发者而言，测试代码是在保障软件质量方面的重要手段之一。随着越来越多的前端项目采用 ES6 的类和对象来组织代码，也必须掌握对它们进行有效测试的方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654ae9557d4982a6eb4e14c4