TypeError: Cannot read properties of undefined (reading 'then') - while Mocking Fetch call in Jest

Question

这是包含 fetch 调用的文件，它只是发送一些本地存储的 json 文件。

// eslint-disable-next-line import/prefer-default-export
export const get = () => {
  // eslint-disable-next-line no-undef
  return fetch('data/posts.json').then((res) => res.json());
};

我在测试中模拟fetch方法并Promise.resolve模拟数组。

import { get } from './posts';

const mockData = [
  {
    "id": "ig-1",
    "accountId": "IG",
    "accountIcon": "/images/ig-icon.svg",
    "accountName": "IG account",
    "accountImageInitial": "J",
    "imageUrl": "/images/social_logo.png",
    "caption": "test",
    "timestamp": 1635510651638
  },
  {
    "id": "fb-1",
    "accountId": "FB",
    "accountIcon": "/images/fb-icon.svg",
    "accountName": "FB account",
    "accountImageInitial": "J",
    "imageUrl": "/images/social_logo.png",
    "caption": "test",
    "timestamp": 1635510051638
  }
];

global.fetch = jest.fn(() => 
  Promise.resolve({
    json: () => Promise.resolve(mockData)
  })
);

describe('The posts API controller', () => {
  test('get() returns expected default payload', async () => {
    const result = await get();
    expect(fetch).toHaveBeenCalledTimes(1);
    expect(result).toBeTruthy();
  });
});

错误

TypeError：无法读取未定义的属性（读取“然后”）

TypeError: Cannot read properties of undefined (reading 'then')

      2 | export const get = () => {
      3 |   // eslint-disable-next-line no-undef
    > 4 |   return fetch('data/posts.json').then((res) => res.json());
        |          ^
      5 | };

不确定我为什么会收到此错误，因为我似乎正确地模拟了 fetch ？

Answer 1

我建议只返回res.json() ，您实际上已经在隐式执行。 此外，在 .then() 之后.then()最好使用.catch()以防在获取过程中遇到错误。

所以，尝试跟随。

export const get = () => {
  fetch('https://jsonplaceholder.typicode.com/posts')
    .then((res) => res.json()) // this is an implicit return
    .catch((err) => console.log(err));
};

或使用异步/等待

const get = async () => {
  try {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts');
    return res.json();
  } catch (error) {
    console.log(error);
  }
};