title: How to mock value of Mobx store when testing a function that uses it
body: <p>I have a Mobx store that saves a token for authentication:</p>
  <pre class="lang-js prettyprint-override"><code>class AuthStore {
    token = null
  
    // ...token gets set at some point in time in a function
  }
  
  export default new AuthStore() // export singleton
  </code></pre>
  <p>and a separate function that imports this store and uses the token to make API-calls:</p>
  <pre class="lang-js prettyprint-override"><code>import { AuthStore } from '../stores'
  
  export function createFetchHeaders() {
    return {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      Authorization: `Bearer ${AuthStore.token}`,
    }
  }
  </code></pre>
  <p>Now I want to write a test to make sure that the token gets used when calling this function:
  I tried doing this using the ES6-Class mocks described in the <a href="https://jestjs.io/docs/en/es6-class-mocks" rel="nofollow noreferrer">Jest documentation</a> but the token is always <code>undefined</code>:</p>
  <pre class="lang-js prettyprint-override"><code>import { createFetchHeaders } from './'
  
  const mockToken = 'foobar'
  jest.mock('../../stores/AuthStore', () =&gt; {
    return jest.fn().mockImplementation(() =&gt; {
      return { token: mockToken }
    })
  })
  
  describe('createFetchHeaders()', () =&gt; {
    it('sets Bearer Authorization header using the provided token', () =&gt; {
      const headers = createFetchHeaders()
  
      const expected = `Bearer ${mockToken}`
  
      expect(headers['Authorization']).toEqual(expected)
    })
  })
  </code></pre>
  <p>Where am I going wrong here? As far as I understand the aforementioned jest docs as well as <a href="https://drailing.net/2020/07/jest-testing-tricks-with-react-and-mobx/#mocking-a-mobx-model-from-usecontext" rel="nofollow noreferrer">this post</a> this way of mocking the implementation should affect the tested function?!</p>