如何设置此JS代码以进行更好的测试

Question

大家好，我在使用Jest测试下面的JS时遇到了问题。它从waitForWorker开始。如果响应"正在工作"，则它将再次调用waitForWorker((。我尝试过Jest测试，但我不知道如何测试内部函数调用，我一直在研究，但失败了。

const $ = require('jquery')
const axios = require('axios')
let workerComplete = () => {
window.location.reload()
}
async function checkWorkerStatus() {
const worker_id = $(".worker-waiter").data('worker-id')
const response = await axios.get(`/v1/workers/${worker_id}`)
return response.data
}
function waitForWorker() {
if (!$('.worker-waiter').length) {
return
}
checkWorkerStatus().then(data => {
// delay next action by 1 second e.g. calling api again
return new Promise(resolve => setTimeout(() => resolve(data), 1000));
}).then(worker_response => {
const working_statuses = ['queued', 'working']
if (worker_response && working_statuses.includes(worker_response.status)) {
waitForWorker()
} else {
workerComplete()
}
})
}
export {
waitForWorker,
checkWorkerStatus,
workerComplete
}
if (process.env.NODE_ENV !== 'test') $(waitForWorker)

我的一些测试在下面，因为我不能和任何人核实。我不知道在测试中两次调用waitWorker.checkWorkerStatus((是否是最好的方法，因为如果响应数据.status为"正在工作"，waitForWorker应该再次调用它

import axios from 'axios'
import * as Worker from 'worker_waiter'
jest.mock('axios')
beforeAll(() => {
Object.defineProperty(window, 'location', {
value: { reload: jest.fn() }
})
});
beforeEach(() => jest.resetAllMocks() )
afterEach(() => {
jest.restoreAllMocks();
});
describe('worker is complete after 2 API calls a', () => {
const worker_id = Math.random().toString(36).slice(-5) // random string
beforeEach(() => {
axios.get
.mockResolvedValueOnce({ data: { status: 'working' } })
.mockResolvedValueOnce({ data: { status: 'complete' } })
jest.spyOn(Worker, 'waitForWorker')
jest.spyOn(Worker, 'checkWorkerStatus')
document.body.innerHTML = `<div class="worker-waiter" data-worker-id="${worker_id}"></div>`
})
it('polls the correct endpoint twice a', async() => {
const endpoint = `/v1/workers/${worker_id}`
await Worker.checkWorkerStatus().then((data) => {
expect(axios.get.mock.calls).toMatchObject([[endpoint]])
expect(data).toMatchObject({"status": "working"})
})
await Worker.checkWorkerStatus().then((data) => {
expect(axios.get.mock.calls).toMatchObject([[endpoint],[endpoint]])
expect(data).toMatchObject({"status": "complete"})
})
})

it('polls the correct endpoint twice b', async() => {
jest.mock('waitForWorker', () => {
expect(Worker.checkWorkerStatus).toBeCalled()
})
expect(Worker.waitForWorker).toHaveBeenCalledTimes(2)
await Worker.waitForWorker()
})

Answer 1

我认为您可以在这里做几件事。

注入状态处理程序

您可以通过将waitForWorker依赖项和副作用注入函数来使其更加明确——这使您可以完全黑盒测试中的系统，并断言触发了正确的注入效果。这就是所谓的依赖注入。

function waitForWorker(onComplete, onBusy) {
// instead of calling waitForWorker call onBusy.
// instead of calling workerComplete call onComplete.
}

现在要进行测试，您只需要创建mock函数。

const onComplete = jest.fn();
const onBusy = jest.fn();

并断言这些是以你期望的方式被调用的。这个函数也是异步的，所以您需要确保您的jest测试知道完成了。我注意到您在测试中使用了async，但您当前的函数没有返回挂起的promise，因此测试将同步完成。

返回承诺

你可以只返回一个承诺并测试它的竞争对手。现在，您的承诺没有暴露在waitForWorker之外。

async function waitForWorker() {
let result = { status: 'empty' };
if (!$('.worker-waiter').length) {
return result;
}

try {
const working_statuses = ['queued', 'working'];
const data = await checkWorkerStatus();
if (data && working_statuses.includes(data.status)) {
await waitForWorker();
} else {
result = { status: 'complete' };
}
} catch (e) {
result = { status: 'error' };
}
return result;
}

上面的示例将您的函数转换为async以提高可读性并消除副作用。我返回了一个带有状态的异步结果，这是有用的，因为waitForWorker可以完成许多分支。这将告诉你，考虑到你的axios设置，承诺最终会以某种状态完成。然后，您可以使用覆盖率报告来确保您关心的分支得到执行，而无需担心测试内部实现细节。

如果您确实想测试内部实现的细节，那么您可能需要结合我上面提到的一些注入主体。

async function waitForWorker(request) {
// ...
try {
const working_statuses = ['queued', 'working'];
const data = await request();
} catch (e) {
// ...
}

// ...
}

然后，您可以向其中注入任何函数，甚至是mock，并确保以您想要的方式调用它，而不必模拟axios。在应用程序中，只需注入checkWorkerStatus即可。

const result = await waitForWorker(checkWorkerStatus);

if (result.status === 'complete') {
workerComplete();
}