模擬服務人員，悲傷的路徑測驗失敗

最近只是使用 Mock Service Worker 來測驗我的 HTTP 請求，我正在尋找測驗我的失敗路徑。

我的第一個測驗通過（很高興），但我收到的失敗錯誤是“JSON 輸入意外結束”

它確實以我想要的方式運行，但從測驗的角度來看，我有點困惑。

我怎樣才能讓我的失敗路徑通過測驗？

我的測驗檔案

import "whatwg-fetch";
import { rest } from "msw";
import { setupServer } from "msw/node";

import { collect } from "./collect";

const server = setupServer(
  rest.get(
    "http://api.openweathermap.org/data/2.5/weather",
    (req, res, ctx) => {
      return res(
        ctx.status(200),
        ctx.json({ base: "stations", clouds: { all: 6 }, cod: 200 })
      );
    }
  )
);

beforeAll(() => server.listen());
afterAll(() => server.close());
afterEach(() => server.resetHandlers());

it("collects data", async () => {
  const res = await collect();
  expect(res).toEqual({ base: "stations", clouds: { all: 6 }, cod: 200 });
});

it("handles failure", async () => {
  server.use(
    rest.get(
      "http://api.openweathermap.org/data/2.5/weather",
      (req, res, ctx) => {
        return res(ctx.status(401));
      }
    )
  );
  await expect(collect()).rejects.toThrow("401");
});

我的 fetch 異步功能

require('dotenv').config()

export const collect = async () => {
    const key = process.env.REACT_APP_API_KE
    // try{
      const res = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=london&appid=${key}`)
      if(res.status !== 200){
        const error = await res.json()
        throw { message: error.message, status: error.cod }
      }
        const data = await res.json()
        return data 
}

uj5u.com熱心網友回復：

修復模擬服務器

問題是collect即使發生錯誤，該函式也需要 JSON 回應，但您的模擬服務器不會回傳該回應。因此，當您res.json()在collect函式中執行此操作時，會出現錯誤。

更新您的回應決議器以回傳json回應。

return res(ctx.json({message: "error"}), ctx.status(401));

修復測驗

toThrow這里不是正確的匹配器，因為async函式總是回傳承諾，在你的情況下，collect函式回傳一個被拋出的資料拒絕的承諾。
因此，您可以改用toEqual匹配器。

您還需要更新測驗錯誤的方式。您可以選擇以下任何選項：

使用rejects匹配器：

it("handles failure", () => {
  server.use(
    rest.get(
      "http://api.openweathermap.org/data/2.5/weather",
      (req, res, ctx) => {
        return res(ctx.json({message: "error"}), ctx.status(401));
      }
    )
  );
  return expect(collect()).rejects.toEqual({ message: "error", status: 401 });
});

使用async/await語法：

it("handles failure", async () => {
  server.use(
    rest.get(
      "http://api.openweathermap.org/data/2.5/weather",
      (req, res, ctx) => {
        return res(ctx.status(401));
      }
    )
  );
  try {
    await collect();
  } catch (err) {
    expect(err).toEqual({ message: "error", status: 401 });
  }
});

使用 .catch

但是在這種方法中，您需要明確檢查您的catch斷言是否已被呼叫，否則已實作的承諾不會使您的測驗失敗。

it("handles failure", async () => {
  server.use(
    rest.get(
      "http://api.openweathermap.org/data/2.5/weather",
      (req, res, ctx) => {
        return res(ctx.status(401));
      }
    )
  );
  expect.assertions(1);
  return collect().catch((err) =>
    expect(err).toEqual({ message: "error", status: 401 })
  );
});

修復collect功能

在你的collect函式中status應該是res.status而不是data.code。

res.json()您還可以通過將呼叫移出條件來稍微清理以下代碼。

require("dotenv").config();

export const collect = async () => {
  const key = process.env.REACT_APP_API_KEY;
  const res = await fetch(
    `http://api.openweathermap.org/data/2.5/weather?q=london&appid=${key}`
  );
  const data = await res.json();
  if (res.status !== 200) {
    throw { message: data.message, status: res.status };
  }
  return data;
};

而且你不應該在反應環境變數中存盤秘密，這會暴露。

uj5u.com熱心網友回復：

在一些幫助下，我更新了我的收集功能，所以它是以下我現在將回應的值作為狀態發送

require("dotenv").config();

export const collect = async () => {
  const key = process.env.REACT_APP_API_KEY;
  const res = await fetch(
    `http://api.openweathermap.org/data/2.5/weather?q=london&appid=${key}`
  );
  const data = await res.json();
  if (res.status !== 200) {
    throw { message: data.message, status: res.status };
  }
  return data;
};

我的測驗現在看起來像這樣，我必須使用 toEqual 匹配器而不是 toThrow 并讓它回傳而不是 await / async

it("handles failure", () => {
  server.use(
    rest.get(
      "http://api.openweathermap.org/data/2.5/weather",
      (req, res, ctx) => {
        return res(ctx.json({message: "error"}), ctx.status(401));
      }
    )
  );
  return expect(collect()).rejects.toEqual({ message: "error", status: 401 });
});

標籤：

上一篇：如何用玩笑測驗這個反應組件？

下一篇：fireEvent.change不會觸發onChange監聽器