How can I mock an ES6 module import using Jest

Question

I want to test that one of my ES6 modules calls another ES6 module in a particular way  With Jasmine this is super easy -- The application code     myModule js import dependency from    dependency    export default  x    gt      dependency doSomething x   2      And the test code    myModule-test js import myModule from     myModule   import dependency from     dependency    describe  myModule        gt      it  calls the dependency with double the input        gt        spyOn dependency   doSomething         myModule 2        expect dependency doSomething  toHaveBeenCalledWith 4              What s the equivalent with Jest  I feel like this is such a simple thing to want to do  but I ve been tearing my hair out trying to figure it out  The closest I ve come is by replacing the imports with requires  and moving them inside the tests functions  Neither of which are things I want to do     myModule js export default  x    gt      const dependency   require    dependency       Yuck   dependency doSomething x   2        myModule-test js describe  myModule        gt      it  calls the dependency with double the input        gt        jest mock     dependency         myModule 2        const dependency   require     dependency       Also yuck     expect dependency doSomething  toBeCalledWith 4              For bonus points  I d love to make the whole thing work when the function inside dependency js is a default export  However  I know that spying on default exports doesn t work in Jasmine  or at least I could never get it to work   so I m not holding out hope that it s possible in Jest either

User · Answer

The claims that you have to mock it at the top of your file are false.

Mock a named ES Import:

// import the named module
import { useWalkthroughAnimations } from '../hooks/useWalkthroughAnimations';

// mock the file and its named export
jest.mock('../hooks/useWalkthroughAnimations', () => ({
  useWalkthroughAnimations: jest.fn()
}));

// do whatever you need to do with your mocked function
useWalkthroughAnimations.mockReturnValue({ pageStyles, goToNextPage, page });

User · Answer

You have to mock the module and set the spy by yourself    import myModule from     myModule   import dependency from     dependency   jest mock     dependency        gt       doSomething  jest fn        describe  myModule        gt      it  calls the dependency with double the input        gt        myModule 2       expect dependency doSomething  toBeCalledWith 4

User · Answer

The question is already answered  but you can resolve it like this  File dependency js const doSomething    x    gt  x export default doSomething   File myModule js import doSomething from  quot   dependency quot    export default  x    gt  doSomething x   2    File myModule spec js jest mock     dependency    import doSomething from  quot    dependency quot   import myModule from  quot    myModule quot    describe  myModule        gt      it  calls the dependency with double the input        gt        doSomething mockImplementation  x    gt  x   10       myModule 2        expect doSomething  toHaveBeenCalledWith 4       console log myModule 2      40

User · Answer

To mock an ES6 dependency module default export using Jest  import myModule from     myModule   import dependency from     dependency    jest mock     dependency        If necessary  you can place a mock implementation like this  dependency mockImplementation      gt  42    describe  myModule        gt      it  calls the dependency once with double the input        gt        myModule 2        expect dependency  toHaveBeenCalledTimes 1       expect dependency  toHaveBeenCalledWith 4              The other options didn t work for my case

User · Answer

I ve been able to solve this by using a hack involving import    It even works for both named and default exports  For a named export     dependency js export const doSomething    y    gt  console log y      myModule js import   doSomething   from    dependency    export default  x    gt      doSomething x   2         myModule-test js import myModule from     myModule   import   as dependency from     dependency    describe  myModule        gt      it  calls the dependency with double the input        gt        dependency doSomething   jest fn       Mutate the named export      myModule 2        expect dependency doSomething  toBeCalledWith 4              Or for a default export     dependency js export default  y    gt  console log y      myModule js import dependency from    dependency      Note lack of curlies  export default  x    gt      dependency x   2         myModule-test js import myModule from     myModule   import   as dependency from     dependency    describe  myModule        gt      it  calls the dependency with double the input        gt        dependency default   jest fn       Mutate the default export      myModule 2        expect dependency default  toBeCalledWith 4      Assert against the default            As Mihai Damian quite rightly pointed out below  this is mutating the module object of dependency  and so it will  leak  across to other tests  So if you use this approach you should store the original value and then set it back again after each test  To do this easily with Jest  use the spyOn   method instead of jest fn    because it supports easily restoring its original value  therefore avoiding before mentioned  leaking

User · Answer

Adding more to Andreas  answer  I had the same problem with ES6 code  but I did not want to mutate the imports  That looked hacky  So I did this  import myModule from     myModule   import dependency from     dependency   jest mock     dependency     describe  myModule        gt      it  calls the dependency with double the input        gt        myModule 2              And added file dependency js in the  quot     mocks    quot  folder parallel to file dependency js  This worked for me  Also  this gave me the option to return suitable data from the mock implementation  Make sure you give the correct path to the module you want to mock

User · Answer

Fast forwarding to 2020  I found this blog post to be the solution  Jest mock default and named export Using only ES6 module syntax     esModule js export default  defaultExport   export const namedExport        gt          esModule test js jest mock    esModule        gt         esModule  true     this property makes it work   default   mockedDefaultExport     namedExport  jest fn          import defaultExport    namedExport   from    esModule   defaultExport      mockedDefaultExport  namedExport     mock function  Also one thing you need to know  which took me a while to figure out  is that you can t call jest mock   inside the test  you must call it at the top level of the module  However  you can call mockImplementation   inside individual tests if you want to set up different mocks for different tests

User · Answer

I solved this another way  Let s say you have your dependency js export const myFunction        gt       I create a depdency mock js file besides it with the following content  export const mockFunction   jest fn     jest mock  dependency js        gt     myFunction  mockFunction       And in the test  before I import the file that has the dependency  I use  import   mockFunction   from  dependency mock  import functionThatCallsDep from    tested-code   it  my test        gt        mockFunction returnValue false        functionThatCallsDep         expect mockFunction  toHaveBeenCalled

[javascript] How can I mock an ES6 module import using Jest?

Examples related to javascript

Examples related to node.js

Examples related to mocking

Examples related to ecmascript-6

Examples related to jestjs