javascript - Jest Mock 返回未定义而不是数据

Question

我正在尝试模拟一个函数，但不确定我在这里做错了什么。我有这个功能“getGroups”

获取组:

export const getGroups = async () => {
  try {
    const groupApiUrl = getDashboardPath(GROUPS_TAB_INDEX);
    const data = await fetch(groupApiUrl, { cache: 'force-cache' });
    const userData = await data.json();
    return userData;
  } catch (error) {
    throw Error(error);
  }
};

___mocks___/getGroups.js:

export default async () => {
  return {
    groups: [
      { id: 1, name: 'Data1' },
      { id: 2, name: 'Data2' }
    ]
  };
};

getGroups.test.js:

jest.mock('./getGroups.js');
// eslint-disable-next-line import/first
import { getGroups } from './getGroups';

const fakeRespose = {
  groups: [
    { id: 1, name: 'Data1' },
    { id: 2, name: 'Data2' }
  ]
};

describe('getGroups', () => {
  it('returns data', async () => {
    const data = await getGroups();
    console.log('DATA', data);  <---- UNDEFINED?
    expect(data).toBeDefined();
    expect(data).toMatchObject(fakeRespose);
  });

  it('handles error', async () => {
    // const data = await getGroups();
    await getGroups().toThrow('Failed');
  });
});

Answer 1

你在这里做错了什么？

在你的模拟中默认导出而不是在实现中命名为

在您的实现中，您正在使用命名导出并且正在导入 { getGroups }所以要让它工作，你需要像这样改变你的模拟

__mocks__\getGroups.js

export const getGroups = async () => {
  return {
    groups: [
      { id: 1, name: 'Data1' },
      { id: 2, name: 'Data2' }
    ]
  };
};

working example

TL;博士

测试模拟

测试模拟功能根本没有意义。这并不能证明您的实现是有效的。即使您更改了实现，您的测试仍然会通过。

仅对实现的依赖项使用模拟

使用jest.genMockFromModule
它将创建 jest.fn()对于每个模块的导出方法，并将保留常量，允许您更改某些测试用例的返回值/实现，并且如果函数已被调用，还可以编写断言

__mocks__\getGroups.js

const mock = jest.genMockFromModule('../getGroups');
mock.getGroups.mockResolvedValue({
  groups: [
    { id: 1, name: 'Data1' },
    { id: 2, name: 'Data2' }
  ]
})

module.exports = mock;

Jest 将自动提升 jest.mock 调用 ( read more... )

因此，您可以先安全地保留导入语句，然后调用 jest.mock