javascript - 使用 Jest 为异步函数编写测试

Question

我正在尝试测试以下功能:

import * as config from "./config.js";

export const state = {
  recipe: {},
};

export async function loadRecipe(id) {
  let result;
  let data;
  try {
    result = await fetch(`${config.API_URL}/${id}`);
    data = await result.json();
  } catch (e) {
    console.log(e);
  }
  console.log(result.status);
  if (!result.status === 200) {
    console.log("here");
    throw new Error(`${data.message} (${result.status})`);
    console.log("1here");
  }

  const { recipe } = data.data;
  state.recipe = {
    id: recipe.id,
    title: recipe.title,
    publisher: recipe.publisher,
    sourceUrl: recipe.source_url,
    image: recipe.image_url,
    servings: recipe.servings,
    cookingTime: recipe.cooking_time,
    ingredients: recipe.ingredients,
  };
}

这是我写的测试。我正在使用 jest-fetch-mock 来模拟全局获取函数。如果我注释掉第二个测试并运行它，我会得到预期的结果。现在我想测试是否输入了错误的 ID。所以我用错误的数据创建了第二个测试，并模拟了 API 的结果:

"use strict()";
import * as model from "../model.js";
import * as apiResponse from "../__fixtures__/apiResponse.js";
import * as recipes from "../__fixtures__/recipes.js";

beforeEach(() => {
  fetch.resetMocks();
});

describe("Request from the api", () => {
  test("Received valid data", async () => {
    fetch.mockResponseOnce(
      JSON.stringify(apiResponse.id_5ed6604591c37cdc054bca85)
    );
    const res = await model.loadRecipe("5ed6604591c37cdc054bca85");
    expect(model.state.recipe).toStrictEqual(
      recipes.recipe_5ed6604591c37cdc054bca85
    );
    expect(fetch).toHaveBeenCalledTimes(1);
  });

  test("Requested an invalid id", () => {
    const body = apiResponse.invalid_5ed6604591c37cdc054bca85zzzzz;
    const init = { status: 400, statusText: "Bad Request" };
    fetch.mockResponseOnce(JSON.stringify(body), init);
    expect(async () => {
      await model.loadRecipe("5ed6604591c37cdc054bca85zzzzz");
    }).toThrowError();
    expect(fetch).toHaveBeenCalledTimes(1);
  });
});

每当运行第二个测试时，我都会从 yarn 收到以下错误:

 RUNS  src/js/__tests__/model.test.js
node:internal/process/promises:225
          triggerUncaughtException(err, true /* fromPromise */);
          ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "TypeError: Cannot destructure property 'recipe' of '((cov_24wkscmv5p(...).s[10]++) , data.data)' as it is undefined.".] {
  code: 'ERR_UNHANDLED_REJECTION'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

请帮助我了解导致问题的原因。

Answer 1

终于!我让它工作了。我必须添加 rejects 来捕获错误。我从这个页面得到它:https://eloquentcode.com/expect-a-function-to-throw-an-exception-in-jest

  test("Requested an invalid id", () => {
    const body = apiResponse.invalid_5ed6604591c37cdc054bca85zzzzz;
    const init = { status: 400, statusText: "Bad Request" };
    fetch.mockResponseOnce(JSON.stringify(body), init);
    expect(async () => {
      await model.loadRecipe("5ed6604591c37cdc054bca85zzzzz");
    }).rejects.toThrowError();
    expect(fetch).toHaveBeenCalledTimes(1);
  });