unit-testing - Jest——模拟 React 组件内部调用的函数

Question

Jest 提供了一种模拟函数的方法，如其文档中所述

apiGetMethod = jest.fn().mockImplementation(
    new Promise((resolve, reject) => {
        const userID = parseInt(url.substr('/users/'.length), 10);
        process.nextTick(
            () => users[userID] ? resolve(users[userID]) : reject({
                error: 'User with ' + userID + ' not found.',
            });
        );
    });
);

但是，这些模拟似乎仅在测试中直接调用该函数时才起作用。

describe('example test', () => {
    it('uses the mocked function', () => {
        apiGetMethod().then(...);
    });
});

如果我有这样定义的 React 组件，我如何模拟它？

import { apiGetMethod } from './api';

class Foo extends React.Component {
    state = {
        data: []
    }

    makeRequest = () => {
       apiGetMethod().then(result => {
           this.setState({data: result});
       });
    };

    componentDidMount() {
        this.makeRequest();
    }

    render() {
        return (
           <ul>
             { this.state.data.map((data) => <li>{data}</li>) }
           </ul>
        )   
    }
}

我不知道如何做到这一点，因此 Foo 组件调用我模拟的 apiGetMethod() 实现，以便我可以测试它是否可以使用数据正确呈现。

(这是一个简化的、人为的示例，旨在了解如何模拟在 React 组件内部调用的函数)

为了清晰起见，编辑 api.js 文件

// api.js
import 'whatwg-fetch';

export function apiGetMethod() {
   return fetch(url, {...});
}

Answer 1

您必须像这样模拟 ./api 模块并导入它，以便您可以设置模拟的实现

import { apiGetMethod } from './api'

jest.mock('./api', () => ({ apiGetMethod: jest.fn() }))

在您的测试中可以使用 mockImplementation 设置模拟应该如何工作:

apiGetMethod.mockImplementation(() => Promise.resolve('test1234'))