带有笑话的组件中的javascript模拟导入答案

【问题标题】：javascript mock import in component with jest带有笑话的组件中的javascript模拟导入
【发布时间】：2018-01-04 09:32:04
【问题描述】：

知道如何模拟“导入”以进行测试吗？我现在用 jest。

即：

//browser.js
export const browser = {
    id: undefined
};
export const getBrowser = function() {
    return browser;
};


//fetch-data.js
//code that uses the browser and I wanna test
import {getBrowser} from './../components/browser';

export const fetchData = function() {
     const browser = getBrowser();
     return Object.assign({dontcare:1}, browser);
};



//My test... Im using jest
import {fetchData} from './../fetch-data.js';
    expect(fetchData()).toBe({......});
};

现在在测试文件中我想模拟browser 组件的响应...

有什么想法吗？

谢谢！

【问题讨论】：

标签： javascript node.js testing mocking jestjs

【解决方案1】：

最终必须在其中一篇文章的帮助下解决它，但使用 Sinnon.js 以不同的方式

1) 我在测试中导入浏览器组件：

import * as browserModule from './../components/browser';

2) 现在在我的测试中，我将模拟我想要的方法：

 sinon.stub(browserModule, 'getBrowser').returns({id: 1});

3) 从这里开始一切顺利，我调用了我的测试对象，它得到了正确的模拟响应:)

【讨论】：

【解决方案2】：

您需要找到一种方法将getBrowser 函数注入到 fetchData 中

export const fetchData = function(injectedFunction) {
     const browser = injectedFunction !== undefined?  injectedFunction() || getBrowser();
     return Object.assign({dontcare:1}, browser);
};

这样你现在可以 //你的测试...我在开玩笑

import {fetchData} from './../fetch-data.js';
import {getBrowser} from './../components/browser';
    let mockBrowser = mock(getBrowser);// <choose your mock library>
    // mock the behavior then inject it to the fetchData 
    expect(fetchData(mockBrowser)).toBe({......});
};

这就是为什么在您的代码中应用依赖注入以便能够轻松测试它的原因

对我来说，您可以使用 http://sinonjs.org/ 来测试间谍、存根和模拟

【讨论】：

当然，在其他语言中使用DI，但从未见过任何用于js的DI。有什么建议吗？
你可以传入参数并检查参数是否undefined。这样做的唯一目的是您可以模拟 object/method 进行测试，仅此而已。在您的测试中，您可以通过模拟 object/method，但在生产代码中，您没有通过 object/method。 const browser = injectedFunction !== undefined? injectedFunction() || getBrowser(); 这条线会为你做到这一点
如果参数未定义，它将执行 getBrowser() 作为代码如果参数未定义执行参数。这样你就可以模拟执行中的内容

【解决方案3】：

fetch-data.js 中的函数依赖依赖于来自browser.js 的导出。

您会发现browser 和getBrowser 都未定义，具体取决于您的jest configuration。

由于browser.js 已准备导出，您可以使用jest.requireActual(moduleName) 导入并在fetch-data.js 中使用该模块。我会通过以下方式做到这一点：

jest.mock("./browser", () => {
    const br = jest.requireActual("browser");
    return { 
       ...br, 
       browser: {id:'changed value'} 
    };
})

【讨论】：