javascript 在组件中使用 jest 模拟导入

Question

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

即：

//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组件的响应......

有什么想法吗？

谢谢！

Answer 1

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

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

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

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

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

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

Answer 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/来测试间谍、存根和模拟

Answer 3

您在fetch-data.js函数依赖于browser.js导出。

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

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

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