接受的答案(也被编辑到问题中)不正确。由于点击调用增加了1秒延迟,它引入了竞争条件。在最好的情况下,这会不必要地减慢测试套件的速度,在最坏的情况下,如果请求需要超过一秒的时间才能解决,则会产生错误的失败(如果它被模拟,则不太可能,但它不会改变代码不安全的事实)。
call
done()
from the callback
. 如果回调中有一次抛出
done
无法访问,呼叫
done(error)
在错误处理程序中,向Jest报告测试用例失败。
为此,您需要添加
完成
作为传递给
it
,
test
或
only
功能,以便在区块中可用。这允许Jest的测试运行程序将测试视为异步的,直到
完成
完成
,测试套件忽略回调的断言。
async
/
await
没有帮助,因为它是一个独立的异步链,而不是回调。
完成
作为参数或返回承诺(
异步
隐式返回一个承诺),而不是两者都返回。但是,您可能仍然希望使用
对于木偶师库调用,而不是
then
. 您可以使用
异步
生命最终点燃了
完成()
例如
it.only('returns a 400 response if email is taken', done => {
(async () => {
page.on('response', response => {
if (response.request().method === 'POST' &&
response.url === `${process.env.USERS_API_DOMAIN}/sessions`) {
try { /* try-catch pattern shown for illustration */
expect(response.status).toEqual(400);
done();
}
catch (err) {
done(err);
}
}
});
await page.goto(`${process.env.DOMAIN}/sign-up`);
await page.waitFor('input[id="Full Name"]');
await page.type('input[id="Full Name"]', 'Luke Skywalker');
await page.type('input[id="Email"]', 'LukeSkywalker@voyage.com');
await page.type('input[id="Password"]', 'LukeSkywalker123', {delay: 100});
await page.click('input[type="submit"]');
})();
});
this answer
显示了一种可能更好的方法,使用
waitForResponse
这可以让你跳过回调
完成
等待响应
是字符串URL或函数谓词,对于正在等待的目标响应应返回true:
it.only('returns a 400 response if email is taken', async () => {
await page.goto(`${process.env.DOMAIN}/sign-up`);
await page.waitFor('input[id="Full Name"]');
await page.type('input[id="Full Name"]', 'Luke Skywalker');
await page.type('input[id="Email"]', 'LukeSkywalker@voyage.com');
await page.type('input[id="Password"]', 'LukeSkywalker123', {delay: 100});
await page.click('input[type="submit"]');
const response = await page.waitForResponse(response =>
response.request().method === 'POST' &&
response.url === `${process.env.USERS_API_DOMAIN}/sessions`
);
expect(response.status).toEqual(400);
});
我还应该提到
waitFor
反对支持
waitForSelector
在上面的片段中
.url
和
.method
最小示例
index.html
这是我们正在测试的网页。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<button>Post</button>
<script>
document
.querySelector("button")
.addEventListener("click", e =>
fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
body: JSON.stringify({
title: "foo",
body: "bar",
userId: 1,
}),
headers: {
"Content-type": "application/json; charset=UTF-8",
},
})
.then(response => response.json())
.then(json => console.log(json))
)
;
</script>
</body>
</html>
index.test.js
(
异步
/
版本):
describe("index page", () => {
it("should respond to POST", async () => {
const url = "https://jsonplaceholder.typicode.com/posts";
await page.goto("http://localhost:1234", {waitUntil: "load"});
await page.click("button");
const response = await page.waitForResponse(response =>
response.request().method() === "POST" &&
response.url() === url
);
const expectedBody = {
body: "bar",
id: 101,
title: "foo",
userId: 1,
};
expect(await response.json()).toEqual(expectedBody);
});
});
指数测验js公司
(
然后
describe("index page", () => {
it("should respond to POST", () => {
const url = "https://jsonplaceholder.typicode.com/posts";
const expectedBody = {
body: "bar",
id: 101,
title: "foo",
userId: 1,
};
return page.goto("http://localhost:1234", {
waitUntil: "load"
})
.then(() => page.click("button"))
.then(() => page.waitForResponse(response =>
response.request().method() === "POST" &&
response.url() === url
))
.then(response => response.json())
.then(body => expect(body).toEqual(expectedBody))
;
});
});
指数测验js公司
(
版本):
describe("index page", () => {
it("should respond to POST", done => {
(async () => {
const url = "https://jsonplaceholder.typicode.com/posts";
const expectedBody = {
body: "bar",
id: 101,
title: "foo",
userId: 1,
};
await page.setRequestInterception(true);
page.on("response", async response => {
if (response.request().method() === "POST" &&
response.url() === url) {
try {
const body = await response.json();
expect(body).toEqual(expectedBody);
done();
}
catch (err) {
done(err);
}
}
});
await page.goto("http://localhost:1234", {
waitUntil: "load"
});
page.click("button");
})();
});
});
