Jest mocking API 调用返回未定义

Question

我是 mocking 我的<App/>发出的 API 调用，但调用的jest.mock返回未定义。

这是我的应用程序：

import './App.css';
import Sidebar from './Sidebar';
import { useEffect, useState } from 'react';
import { getCount } from './api';

function App() {
  const [state, setState] = useState({
    status: 'ok',
    count: 0,
  });

  useEffect(() => {
    getCount().then((res) => setState((prevState) => ({ ...prevState, count: res })));
  }, []);

  return (
    <div className='App'>
      <Sidebar state={state} />
    </div>
  );
}

export default App;

下面是 API 调用（返回一个 Promise）：

export function getCount() {
  return Promise.resolve(5);
}

这是测试 API 调用的测试：

import { render, screen } from '@testing-library/react';
import App from './App';

jest.mock('./api', () => ({
  getCount: jest.fn(() => Promise.resolve(5)),
}));

test('renders app', () => {
  render(<App />);
});

这是我在下面得到的错误。 我不确定为什么返回 Promise（正是应用程序期望返回的）的 Jest 模拟仍然返回为“未定义”。 非常感谢任何帮助。

Answer 1

尝试添加说明符，告诉它你是 mocking 一个使用 ES6 导入/导出的模块：

import { render, screen } from '@testing-library/react';
import App from './App';

jest.mock('./api', () => ({
  __esModule: true,
  getCount: jest.fn(() => Promise.resolve(5)),
}));

test('renders app', () => {
  render(<App />);
});