{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/making-sense-of-destructured-imports-for-testing-and-stubs/", "result": {"data":{"site":{"siteMetadata":{"title":"DeveloPanda","author":"Eyad Kobatte"}},"markdownRemark":{"id":"8ee3090c-a269-5095-9284-716d55ee0685","excerpt":"Edit This article has been edited with the following Previously, I wrote that we would be getting new instances of a function when we destructure an import. But…","html":"

Edit

\n

This article has been edited with the following

\n

Previously, I wrote that we would be getting new instances of a function when we destructure an import.

\n

But in reality, we create a local variable that will not be reflected with newer changes when we destructure an import.

\n
\n

Testing is an immensely useful skill to have in your utility belt.

\n

\"Batman

\n

Fortunately, I had the privilege of learning to write tests recently. When I learned JavaScript, it was with ES5 and Promises and all the modern goodies of JavaScript, so all my code heavily relies on ES5+ features and barely includes any callbacks (Say no to callback hell)

\n

I faced this issue recently where we are using destructured imports in our node.js file and stubbing a few HTTP methods. All our stubs failed and our tests started making HTTP calls to actual APIs. I ran down this path of trying to google what was going wrong yet no results could be found. What I learned from here mainly applies to testing but its applications could be anywhere we want to reuse a module/package instead of creating local copies of a function

\n

We are using got as an HTTP library in our node.js backend. GOT has been designed in such a way where the specific methods that are needed can be destructured and imported so we do not import the whole package. Nice!!

\n
// lib/func/index.js\n\nconst { get } = require('got'); // Only import get and no other methods\n\n// More code here\n\nconst fakeFunc = async () => {\n  const result = await get('API');\n  return result;\n};\n\nmodule.exports = fakeFunc;
\n

Not really. We started facing an issue when we write tests, and stub the methods from got

\n
// lib/func/index.spec.js\n\nconst got = require('got');\nconst sinon = require('sinon');\n\nconst fakeFunc = require('.');\n\n// More code here\n\ndescribe('Test API Calls', function (done) {\n  const stub = sinon.stub(got, 'get');\n  fakeFunc().then((data) => {\n    // Write your tests here\n  });\n});
\n

You can see that we stub the get function from the got package. We would now expect our test to not make an HTTP call to the API specified in the code.

\n

Sadly, this is not what happens. In the lib/func/index.js file when we write const { get } = require('got'), we create a local variable with a copy of the the get module from GOT. This variable is not reflected when stubbed. So at this point, we have 1 get function which is a copy before we stubbed it, and a get function which is stubbed in our test file.

\n

When we destructure an import, we effectively created a local variable of the get module that is not tied to the stub that we created. This means that the test will hit the API and get actual data. (Big no-no)

\n

To fix this problem, We import GOT as a whole library and use the modules from the GOT package without destructuring. Small sacrifice for a bigger win.

\n

How we temporarily fixed this problem

\n

We had not yet realized that destructuring would be creating local copies of modules. So upon googling for a solution, we found a library called proxyquire which will mock our dependencies in the functions. This would mean we can replace the non-stubbed version of the get instance in our function with a stubbed value from the test.

\n
// lib/func/index.spec.js\n\nconst got = require('got');\nconst sinon = require('sinon');\nconst proxyquire = require('proxyquire');\n\n// We do not import our function here\n// const fakeFunc = require('.');\n\n// More code here\n\ndescribe('Test API Calls', function (done) {\n  const stub = sinon.stub(got, 'get'); // Notice how we do not stub the got module here\n\n  // Mock the get module in the got dependency with our stub here\n  const functionHolder = proxyquire('.', {\n    got: {\n      get: stub,\n    },\n  });\n\n  functionHolder.fakeFunc().then((data) => {\n    // Write your tests here\n  });\n});
\n

This fixed the problem for a while until we ended up using PROXYQUIRE everywhere, even when it is not needed. This is not the best way to go about it as we are now mocking our dependencies instead of fixing a problem

\n

In the end, we steered clear of proxyquire and stopped destructuring imports for the GOT package

\n

\"Working

","frontmatter":{"title":"Making sense of destructured imports for testing and stubs","date":"April 16, 2020"}}},"pageContext":{"slug":"/making-sense-of-destructured-imports-for-testing-and-stubs/","previous":null,"next":{"fields":{"slug":"/thinking-in-typescript/"},"frontmatter":{"title":"Thinking in TypeScript"}}}}, "staticQueryHashes": ["3128451518","569354865"]}