在前端开发中，测试是非常重要的一环。而在测试过程中，测试替身（Test Doubles）是一个重要的概念。测试替身是指在测试中代替真实对象的对象，可以让开发人员更加灵活地进行测试，同时也可以避免测试对真实对象造成的影响。
在 JavaScript 中，我们可以使用 Chai-test-doubles 库来进行测试替身。Chai-test-doubles 是一个基于 Chai.js 的测试替身库，可以用于创建各种类型的测试替身，如 Stub、Spy、Mock 等。
安装
首先，我们需要安装 Chai-test-doubles。可以通过 npm 来进行安装：
npm install chai chai-test-doubles --save-dev
使用
Stub
Stub 是一个用于替换真实对象的测试替身，可以用于模拟对象的行为或返回值。例如，我们可以使用 Stub 来模拟一个 HTTP 请求的返回值。
以下是一个使用 Stub 的示例代码：
// javascriptcn.com 代码示例
const { expect } = require('chai');
const td = require('chai-test-doubles').default;
function getUserInfo() {
return fetch('/api/user').then(response => response.json());
}
describe('getUserInfo', () => {
it('should return a user object', async () => {
const userStub = td.function();
td.when(userStub()).thenResolve({ name: 'Alice', age: 20 });
const response = await getUserInfo(userStub);
expect(response).to.deep.equal({ name: 'Alice', age: 20 });
});
});在上面的代码中，我们使用了 td.function() 方法来创建一个 Stub 对象，然后使用 td.when() 方法来定义 Stub 对象的行为。在这个例子中，我们定义了 Stub 对象的返回值为 { name: 'Alice', age: 20 }。
Spy
Spy 是一个用于记录函数调用情况的测试替身，可以用于验证函数是否被调用、被调用的次数、以及调用的参数等。
以下是一个使用 Spy 的示例代码：
// javascriptcn.com 代码示例
const { expect } = require('chai');
const td = require('chai-test-doubles').default;
function getUserInfo() {
return fetch('/api/user').then(response => response.json());
}
describe('getUserInfo', () => {
it('should call fetch', async () => {
const fetchSpy = td.function('fetch');
td.when(fetchSpy('/api/user')).thenResolve({ json: () => ({ name: 'Alice', age: 20 }) });
const response = await getUserInfo(fetchSpy);
expect(response).to.deep.equal({ name: 'Alice', age: 20 });
td.verify(fetchSpy('/api/user'), { times: 1 });
});
});在上面的代码中，我们使用了 td.function('fetch') 方法来创建一个名为 fetch 的 Spy 对象，然后使用 td.when() 方法来定义 Spy 对象的行为。在这个例子中，我们定义了 Spy 对象的返回值为 { json: () => ({ name: 'Alice', age: 20 }) }。
在测试完成后，我们使用 td.verify() 方法来验证 Spy 对象是否被调用了一次。
Mock
Mock 是一个用于模拟对象的测试替身，可以用于验证对象的方法是否被调用，以及调用的参数等。
以下是一个使用 Mock 的示例代码：
// javascriptcn.com 代码示例
const { expect } = require('chai');
const td = require('chai-test-doubles').default;
class User {
async getUserInfo() {
const response = await fetch('/api/user');
return response.json();
}
}
describe('User', () => {
it('should call fetch', async () => {
const fetchMock = td.function('fetch');
td.when(fetchMock('/api/user')).thenResolve({ json: () => ({ name: 'Alice', age: 20 }) });
const user = new User();
const response = await user.getUserInfo(fetchMock);
expect(response).to.deep.equal({ name: 'Alice', age: 20 });
td.verify(fetchMock('/api/user'), { times: 1 });
});
});在上面的代码中，我们使用了 td.function('fetch') 方法来创建一个名为 fetch 的 Mock 对象，然后使用 td.when() 方法来定义 Mock 对象的行为。在这个例子中，我们定义了 Mock 对象的返回值为 { json: () => ({ name: 'Alice', age: 20 }) }。
在测试完成后，我们使用 td.verify() 方法来验证 Mock 对象是否被调用了一次。
总结
Chai-test-doubles 是一个非常实用的测试替身库，可以帮助开发人员更加灵活地进行测试，同时也可以避免测试对真实对象造成的影响。在实际开发中，我们可以根据具体的需求来选择合适的测试替身类型，并结合 Chai.js 进行断言和验证。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6554cb03d2f5e1655dea75ac