我应该在我的 React.js 应用中检查来自服务器的响应数据。我使用 Jest 和 Puppeteer “ ^ 5.2.1”。
单击带有id =“ test-settings”的按钮(转换为另一页面)后,会进行前两个数据检查,通常会发生错误,有时没有错误。令人惊讶的是,相同的代码有时效果很好,但通常效果不佳。为什么不稳定?
我经常收到错误消息:
Protocol error (Network.getResponseBody): No resource with given identifier found
const puppeteer = require('puppeteer');
let browser;
let page;
jest.setTimeout(30000);
describe('Http response', () => {
test('checking response data on app', async (done) => {
browser = await puppeteer.launch({
headless: true,
ignoreHTTPSErrors: true,
// slowMo: 20, // 250
// args: ['--start-maximized'],
// devtools: true
});
page = await browser.newPage();
const user = 'John';
const pass = '123456';
await page.goto('http://localhost:3000');
await page.waitForSelector('.LoginPage__form');
await page.click('input[name=username]')
await page.type('input[name=username]', user)
await page.click('input[name=password]')
await page.type('input[name=password]', pass)
await page.click('button[type=submit]') // or await page.keyboard.press('Enter')
// Checking response data on request "/login"
const loginResponse = await page.waitForResponse(res => res.url().endsWith('/login') && res.status() === 200);
const expectedLoginResponseData = { isLoggedIn: true, user_id: expect.any(String) };
expect(JSON.parse((await loginResponse.buffer()).toString())).toStrictEqual(expectedLoginResponseData);
// Checking response data on request "/show_token"
const showTokenResponse = await page.waitForResponse(res => res.url().endsWith('/show_token') && res.status() === 200);
expect(JSON.parse((await showTokenResponse.buffer()).toString())).toStrictEqual(expect.objectContaining({ token: expect.any(String) }));
await page.waitForSelector('.Board')
await page.waitForSelector('.App-header');
await page.click('#test-settings');
// Checking response data on request "/get_resources"
const getResourcesResponse = await page.waitForResponse(res => res.url().endsWith('/get_resources') && res.status() === 200);
const data = JSON.parse((await getResourcesResponse.buffer()).toString());
expect(data).toStrictEqual(expect.objectContaining({ resources: expect.any(Array) }));
done();
});
});
describe('Logout', () => {
test('users can logout', async (done) => {
await page.click('#test-login');
await page.waitForSelector('.alert-info')
const finalText = await page.$eval('.alert-info', el => el.textContent);
expect(finalText).toBe('Welcome to Web App!Please fill in your credential');
await browser.close();
done();
});
});
我跑步时
npm run test
后来我更改了代码并使用Promise.all
最好是因为在第一阶段没有暂停Chromium,但是错误相同。
const [, loginResponse, showTokenResponse] = await Promise.all([
page.click('button[type=submit]'),
page.waitForResponse(res => res.url().endsWith('/login') && res.status() === 200),
page.waitForResponse(res => res.url().endsWith('/show_token') && res.status() === 200)
]).catch(error => {
console.error(error);
});
// console.log(await loginResponse.json());
// console.log(await showTokenResponse.json());
const expectedLoginResponseData = { isLoggedIn: true, user_id: expect.any(String) };
const receivedLoginResponseData = JSON.parse((await loginResponse.buffer()).toString());
expect(receivedLoginResponseData).toStrictEqual(expectedLoginResponseData);
const expextedTokenResponseData = expect.objectContaining({ token: expect.any(String) });
const receivedTokenResponseData = JSON.parse((await showTokenResponse.buffer()).toString());
expect(receivedTokenResponseData).toStrictEqual(expextedTokenResponseData);