如何在测试使用它的 function 时模拟 Mobx 商店的价值

Question

I have a Mobx store that saves a token for authentication:

class AuthStore {
  token = null

  // ...token gets set at some point in time in a function
}

export default new AuthStore() // export singleton

and a separate function that imports this store and uses the token to make API-calls:

import { AuthStore } from '../stores'

export function createFetchHeaders() {
  return {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    Authorization: `Bearer ${AuthStore.token}`,
  }
}

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 Jest documentation but the token is always undefined :

import { createFetchHeaders } from './'

const mockToken = 'foobar'
jest.mock('../../stores/AuthStore', () => {
  return jest.fn().mockImplementation(() => {
    return { token: mockToken }
  })
})

describe('createFetchHeaders()', () => {
  it('sets Bearer Authorization header using the provided token', () => {
    const headers = createFetchHeaders()

    const expected = `Bearer ${mockToken}`

    expect(headers['Authorization']).toEqual(expected)
  })
})

Where am I going wrong here? As far as I understand the aforementioned jest docs as well as this post this way of mocking the implementation should affect the tested function?!

Answer 1

This is because you are exporting object instead of class. So the mocking is not working. You can use javascript feature of overwriting function, object and class manually (which is internally used by jest). The test code will look like this

import AuthStore from "../../stores/AuthStore"
import {createFetchHeaders} from './';

const mockToken = 'foobar'

describe('createFetchHeaders()', () => {
    it('sets Bearer Authorization header using the provided token', () => {
        AuthStore.token = mockToken;
        const headers = createFetchHeaders()

        const expected = `Bearer ${mockToken}`

        expect(headers['Authorization']).toEqual(expected)
    })
})

Or in mocking itself you can return object instead of function

import {createFetchHeaders} from './';

const mockToken = 'foobar'
jest.mock('../../stores/AuthStore', () => {
    return { token: 'foobar' }
})

describe('createFetchHeaders()', () => {
    it('sets Bearer Authorization header using the provided token', () => {
        const headers = createFetchHeaders()

        const expected = `Bearer ${mockToken}`

        expect(headers['Authorization']).toEqual(expected)
    })
})

And import in createFetchHeaders is wrong, which need to like this

import AuthStore from '../stores'

you don't need "{}", because you exporting AuthStore as default.