ES6 module system is a great addition to JavaScript language, but sometimes it’s at odds with writing tests, because you need to mock imported function.<\/p>\n\n
Usual solution is to use Dependency Injection akin to what is used in There are two alternative approaches. One is by using mocking library, which is simpler. Another one is more complex and uses Dependency Injection, but in a way, which does not cause big changes to initial code. Using mocking library works fine at the moment, because ES6 modules are transpiled into ES5 objects. But it could not work with real ES6 modules and then Dependency Injection way can be handy.<\/p>\n\n Let’s consider feature.js<\/span> module, which looks like this:<\/p>\n\n feature.js<\/span> imports fetchData<\/span> function from backend.js<\/span>. The goal is to mock fetchData<\/span> call in feature.js<\/span> when writing functional tests. In our example, we will use Sinon.JS<\/strong><\/a>, but Jasmine<\/strong><\/a> can be used as well.<\/p>\n\n So, the main trick here is to import the whole module:<\/p>\n\n and stub\/mock required call:<\/p>\n\n To manually mock the function, the simplest way would be to reassign fetchData<\/span> to some mock-function, but imported bindings are read-only. So, we need to make a little trick:<\/p>\n\n Now, instead of directly using fetchData<\/span> from backend.js<\/span> we imported it as originalFetchData<\/span>. Our local variable fetchData<\/span> can be reassigned to anything we want. By default it is bound to originalFetchData<\/span>. To mock it we need to call mock<\/span> and pass a mocked version. In case we need to unmock, just call mock<\/span> with no params.<\/p>\n\n An example of usage in test:<\/p>\n\n There is a slight variation of this approach, if we need to mock a set of calls from one module:<\/p>\n\n Here we import the whole module and cherry-pick required calls. The rest is the same as before, but we need to pass an object with mocked calls into mock<\/span>.<\/p>\n","protected":false},"excerpt":{"rendered":" ES6 module system is a great addition to JavaScript language, but sometimes it’s at odds with writing tests, because you need to mock imported function. Usual solution is to use Dependency Injection akin to what is used in Angular.JS. You need to wrap the whole module into some function and explicitly pass required dependencies. While…<\/p>\n","protected":false},"author":25,"featured_media":9418,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3],"tags":[],"coauthors":["Sergii Boiko"],"class_list":["post-8259","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"aioseo_notices":[],"categories_data":[{"name":"Engineering","link":"https:\/\/railsware.com\/blog?category=development"}],"post_thumbnails":"https:\/\/railsware.com\/blog\/wp-content\/themes\/railsware\/vendors\/images\/article-thumbnail-default.jpg","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/8259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/comments?post=8259"}],"version-history":[{"count":45,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/8259\/revisions"}],"predecessor-version":[{"id":13519,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/8259\/revisions\/13519"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/media\/9418"}],"wp:attachment":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/media?parent=8259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/categories?post=8259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/tags?post=8259"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/coauthors?post=8259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Angular.JS<\/code>. You need to wrap the whole module into some function and explicitly pass required dependencies. While such approach works fine, it mangles code and adds an additional layer of indirection.<\/p>\n\nMocking with Sinon.JS<\/h2>\n\n
\n\/\/ feature.js module\nimport { fetchData } from '.\/backend';\n\nexport function doSomething() {\n \/\/ some code which calls fetchData\n}\n<\/pre>\n\n\n\/\/ feature.test.js module\nimport { expect } from 'chai';\nimport sinon from 'sinon';\nimport { doSomething } from '.\/feature';\nimport * as Backend from '.\/backend';\n\ndescribe.only('doSomething', () => {\n it('does something meaningful', () => {\n sinon.stub(Backend, 'fetchData');\n \/\/ use doSomething with mocked fetchData\n });\n});\n<\/pre>\n\n\nimport * as Backend from '.\/backend';\n<\/pre>\n\n
\nsinon.stub(Backend, 'fetchData');\n<\/pre>\n\n
Mocking with Dependency Injection<\/h2>\n\n
\n\/\/ feature.js module\nimport { fetchData as originalFetchData } from '.\/backend';\n\nlet fetchData = originalFetchData;\n\nexport function mock(mockedFetchData) {\n fetchData = mockedFetchData || originalFetchData;\n}\n\nexport function doSomething() {\n \/\/ some code which calls fetchData\n}\n<\/pre>\n\n\n\/\/ feature.test.js module\nimport { expect } from 'chai';\nimport { mock, doSomething } from '.\/feature';\n\nconst dummyFetchData = () => {};\n\ndescribe('doSomething', () => {\n beforeEach(() => { mock(dummyFetchData); });\n afterEach(() => { mock(); });\n\n it('does something meaningful', () => {\n \/\/ use doSomething with mocked fetchData\n });\n});\n<\/pre>\n\nMocking Module<\/h2>\n\n
\n\/\/ feature.js module\nimport * as Backend from '.\/backend';\n\nlet { fetchData, saveData, deleteData } = Backend;\n\nexport function mock(mockedBackend) {\n ({ fetchData, saveData, deleteData } = mockedBackend || Backend);\n}\n\n\/\/ some code which calls functions from Backend\n<\/pre>\n\n