如何模拟/监视来自不同文件的函数调用答案

【问题标题】：How to mock/spyOn a call to a function from a different file如何模拟/监视来自不同文件的函数调用
【发布时间】：2020-09-01 09:51:30
【问题描述】：

我有这个函数，它在提交时被调用。有效负载发布后，我想在名为showResponseMessage 的单独文件中调用一个函数：

Contact.js


import { onValueChangeHandler, showResponseMessage, extractData } from '../../utility/Helpers/Helpers';


const [config, setConfig] = useState(initialState)

const recommendationHandler = (event) => {
        event.preventDefault();
        axios.post('/contact.json', extractData(config.addMessage))
            .then(() => {
                showResponseMessage(`Din besked er sendt.`, initialState, false, setConfig, 5000);
            })
            .catch(() => {
                showResponseMessage(`Der opstod en fejl ved sendning. Prøv igen senere.`, {}, true, setConfig, 10000);
            });
    }

当我尝试对函数进行 spyOn 时出现问题，如下所示：

Contact.test.js

it.only('should POST data to server if necessary payload is included', () => {
        const wrapper = shallow(<Contact />);
        jest.spyOn(helpers, 'showResponseMessage')
        jest.spyOn(axios, 'post').mockResolvedValueOnce({
            data: [
                {
                    userId: 1,
                    id: 1,
                    title: 'test'
                }
            ]
        });

        wrapper.find('form').simulate('submit', {
            preventDefault: () => { }
        });
        expect(axios.post).toHaveBeenCalledTimes(1);
        expect(helpers.showResponseMessage).toHaveBeenCalled();
    });

Helpers.js

export const showResponseMessage = (message, initialState, error, callback, time) => {
    if (!error) {
        callback({...initialState, responseMessage: message, error: error });
        setTimeout(() => {
            callback({...initialState, responseMessage: '', error: error });
        }, time)
    } else {
        callback(prevState => ({...prevState, responseMessage: message, error: error }));
        setTimeout(() => {
            callback(prevState => ({...prevState, responseMessage: '', error: error }));
        }, time)
    }

}

它返回 0 调用次数。我不太清楚如何从单独的文件中窥探函数调用。

我想我可以测试 UI 是否更新，但我不确定如何在测试时将生命周期向前推进（在 Jasmine 中，我记得当我进行异步调用时，我必须强制使生命周期进展确定发生了变化）。 showResponseMessage 也应该触发状态更新，因为我传递了由该特定函数触发的要使用的 updateConfig。

【问题讨论】：

标签： javascript reactjs jestjs enzyme

【解决方案1】：

你必须添加

jest.mock('../path/to/Helpers', () => ({
  __esModule: true, // this property makes it work
  showResponseMessage: jest.fn(),
}));

【讨论】：

也许我应该证明这一点，但为了expect(helpers.showResponseMessage)，我将其导入顶部为：import * as helpers from '../path/to/helpers.js'。使用您的解决方案，它会告诉我：如果我删除导入，则 showREsponseMessage 不存在，或者如果我保留它，则期望对间谍功能进行模拟。
我也开始认为，我的异步 axios 调用无法解决并及时返回。恐怕它只是绕过它，导致永远不会调用 showResponseMessage。