Testing: mocking node-fetch dependency that it is used in a class method - testing

I have the following situation:
A.js
import fetch from 'node-fetch'
import httpClient from './myClient/httpClient'
export default class{
async init(){
const response = await fetch('some_url')
return httpClient.init(response.payload)
}
}
A_spec.js
import test from 'ava'
import sinon from 'sinon'
import fetch from 'node-fetch'
import httpClient from './myClient/httpClient'
import A from './src/A'
test('a async test', async (t) => {
const instance = new A()
const stubbedHttpInit = sinon.stub(httpClient, 'init')
sinon.stub(fetch).returns(Promise.resolve({payload: 'data'})) //this doesn't work
await instance.init()
t.true(stubbedHttpInit.init.calledWith('data'))
})
My idea it's check if the httpClient's init method has been called using the payload obtained in a fetch request.
My question is: How I can mock the fetch dependency for stub the returned value when i test the A's init method?

Finally I resolved this problem stubbing the fetch.Promise reference like this:
sinon.stub(fetch, 'Promise').returns(Promise.resolve(responseObject))
the explanation for this it's that node-fetch have a reference to the native Promise and when you call fetch(), this method returns a fetch.Promise. Check this out

You can stub fetch() as decribed in the manual
import sinon from 'sinon'
import * as fetchModule from 'node-fetch'
import { Response } from 'node-fetch'
// ...
const stub = sinon.stub(fetchModule, 'default')
stub.returns(new Promise((resolve) => resolve(new Response(undefined, { status: 401 }))))
// ...
stub.restore()
Note, that fetch() is the default export from node-fetch so you neeed to stub default.

sinon.stub(fetch) can't stub a function itself. Instead you need to stub the node-fetch dependency from inside ./src/A, perhaps using something like proxyquire:
import proxyquire from 'proxyquire`
const A = proxyquire('./src/A', {
'node-fetch': sinon.stub().returns(Promise.resolve({payload: 'data'}))
})

#mrtnlrsn's answer does not work for files generated from TypeScript in NodeJS, because default is a generated property, each module which imports such a dependency has its own, so stubbing one does not affect others.
However, NodeJS gives access to imported modules, so stubbing works this way:
const nodeFetchPath = require.resolve("node-fetch");
const nodeFetchModule = require.cache[nodeFetchPath];
assert(nodeFetchModule);
const stubNodeFetch = sinon.stub(nodeFetchModule, "exports");
Make sure you use the same node-fetch module as the tested module, e.g. using yarn dedupe. Or build your own nodeFetchPath.

In my case, I found it useful to preserve the node-fetch functionality since my mock responses were already being supplied via nock
To accomplish this, I proxyquire'd the dependency as described in the answer above but wrapped a require call in a spy:
import proxyquire from 'proxyquire'
import { spy } from 'sinon'
const fetchSpy = spy(require('node-fetch'))
const moduleA = proxyquire(
'./moduleA',
{ 'node-fetch': fetchSpy }
)
...
expect(fetchSpy.args).toBe(...)

Related

Nuxt avoid import of client-side script for server-side rendering

In my nuxt.js application, I have a script that imports an NPM package which is only compatible with browser contexts (it references document, location, window, etc.)
Is there a way to exclude this from SSR?
import thing from "#vendor/thing"; // causes `document not defined` error
export default showThing(){
if (process.client) {
thing();
}
}
I can use the method with process.client but this file is still imported in my components.
You could import it dynamically rather than in every context.
As explained in my answer here: https://stackoverflow.com/a/67825061/8816585
In your example, that would be something like this
export default showThing(){
if (process.client) {
const thing = await import('#vendor/thing')
thing()
}
}

An updated approach to testing vuex actions

In the "Testing Actions" documentation, there is a recommendation to use inject-loader in order to mock entire module imports, and their respective dependencies, when unit testing.
For example, you can mock the ../api/shop import found inside the ./actions file with the following:
const actionsInjector = require('inject-loader!./actions')
// create the module with our mocks
const actions = actionsInjector({
'../api/shop': {
getProducts (cb) {
setTimeout(() => {
cb([ /* mocked response */ ])
}, 100)
}
}
})
Unfortunately, that package does not support Webpack 5.
Is there an updated approach, or alternative package, that is recommended?
Thanks #Estus Flask.
The clarification/mixup was that, whilst I was using vi.mock, and it's auto-mocking algorithm :
"...will mock the module itself by invoking it and mocking every
export."
i.e. it still runs the import statements. To prevent this, a factory must be provided (see documentation), e.g.:
vi.mock('module', <factory-here>)
Which then replaces the entire file import.

How to mock vuex functions with no direct access?

So I have run into quite a test problem.
To Summarize:
A while back I created a private npm Module, that manages and create a vuex store and injects it as a module into the main vuex store.
Now I want to mock a specific function of that vuex module in my test but that doesn't work.
I tried this:
store.getters.getSomething = jest.fn(() => "stuff);
But that results in this error:
TypeError: Cannot set property getSomething of #<Object> which has only a getter
Now did a little digging, and I here you can see where this getter comes from:
First there is a simple vuex module definition:
//vuexModule this is not accessible outside of the npm module
getters:{
getSomething: (state)=>{ return "stuff"}
}
export { getters }
Now this is imported into this class:
//storeProvider //this is exposed by the npm package
import vuexModule from "./vuexModule";
export default class StoreProvider {
constructor(vuexStore, vuexModuleName = "someStore") {
this.vuexStore = vuexStore;
this.vuexStore.registerModule(vuexModuleName, VuexConfigStore);
}
So this class will generate a vuex module using the previously defined module.
Now the whole thing is added to the main vuex store in the actual application.
Note: this code is now the actual application and not in the npm package.
import StoreProvider from "someNpmModule";
import mainStore from "vuexPlugin";
const storeProvider = new StoreProvider(store);
//later in main:
new Vue({ mainStore })
So the question is: How can I mock getSomething?
I know the code is quite abstracted, but I can't show all the code, and its probably too much for stackoverflow.
The main point is, that I can just import the getter and mock it like this:
import {getSomething} from "...";
getSomething = jest.fn(() => "stuff);
//Or this:
store.getters.getSomething = jest.fn(() => "stuff);
I found this stackoverflow question: TypeError during Jest's spyOn: Cannot set property getRequest of #<Object> which has only a getter
But as the npm package is rather big I can't just mock the whole package for the unit tests, as it provides some necessary pre-conditions. I tried genMockFromModule(), but I still need to target this specific function.
And as mentioned I can't simply import the function.
Any ideas?

import js file inside .vue component loaded using httpVueLoader

i want to not use webpak form my vue devlopement,
so there is 2 alternative
writting components as .js file or
writing them as .vue file and use httpVueLaoder to load component as if they are .js file
with httpvueLoader think go grate untile the time i want to use an API inside my component
ther i can not get the API
i have a Home.vue componet inside ther is a FormLot.vue component in witchi try to import API.js
<script>
let FormLot = window.httpVueLoader('./frontEnd/page/lot/FormLot.vue')
module.exports = {
name:"Home",
components: {FormLot:FormLot},
...
};
</script>
in FormLot.vue
// _END_ is the absolut path to the site , soi can change it later
let API = import(_END_+'/api/api.js') // dont work return promise
import API from './frontEnd/api/api.js' // dont work componnet dont show at all :(
let FormLotE1 = window.httpVueLoader(_END_+'/page/lot/FormLotE1.vue')
module.exports ={
...
};
</script>
API.JS
module.exports ={
...
};
API.JS
export default {
...
};
with API.js i tryed export default and module.export bothe dont work
nota
when using webpack API.js got been normaly imported and work fine
when using import API from path httpVueLaoder dont work
so i tried to do
const API= import(path)
problem witch that ,API is promise ,wich can notbe used :(
using await dontsolve the problem even when using
const API = (async ()=> await import(path))()
my solution still to call import using await but not in the top of the script
i call it in the mounted() function
async mounted(){
API = (await import(_END_+'/api/api.js')).default
},
note that you must use .default because import return a module :)
enter code here

How to dynamically mock ES6 modules with SystemJS?

I have a single-page application written in ES6. The code in transpiled server-side into classic javascript by babelJs, then loaded by SystemJs.
Javascript present in my html file:
System.config({
baseURL: '/js',
meta: {
'/js/*': { format: 'cjs' }
}});
System.defaultJSExtensions = true;
System.import("index.js")
.catch(function (error) {
console.error(error)
});
index.js:
import f1 from 'file1';
import f2 from 'file2';
// code here ...
Everything works fine. index.js is loaded, and all import statements are correctly executed.
Now, I want to create some pages with mocked ES6 modules, for testing purpose. My goal is to display pages by replacing model classes (contained in ES6 modules) with other static test classes.
Let's say I have 3 files: real_model.js, fake_model.js and component.js. component.js import the real model (import Model from 'real_model';).
How can I replace the real model by the fake one (in the component) dynamically ?
It's been a while since this question was posted, but maybe this solution might still be of help to anyone else.
With SystemJS it is possible to create a module on-the-fly using System.newModule. Then you can use System.set to overwrite existing modules with the new one. In our tests we use the following helper function to mock existing modules:
function mockModule(name, value) {
const normalizedName = System.normalizeSync(name);
System.delete(normalizedName);
System.set(normalizedName, System.newModule(Object.assign({ default: value }, value)));
}
Then, e.g. inside the beforeEach callback, we assign the mock and then import the module to be tested using System.import:
let [component, fake_model] = [];
beforeEach(() => {
// define mock
fake_model = { foo: 'bar' };
// overwrite module with mock
mockModule('real_model', fake_model);
// delete and reimport module
System.delete(System.normalizeSync('component'));
return System.import('src/testing').then((m) => {
component = m.default;
}).catch(err => console.error(err));
});
// test your component here ...
A big advantage of this approach is that you don't need an additional mocking library and it works solely with SystemJS.