如何在测试使用它的函数时模拟 Mobx 存储的值

Question

我有一个 Mobx 商店，它保存了一个用于身份验证的令牌：

class AuthStore {
  token = null

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

export default new AuthStore() // export singleton

和一个单独的函数，它导入这个商店并使用令牌进行 API-调用：

import { AuthStore } from '../stores'

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

现在我想编写一个测试以确保在调用此函数时使用令牌：我尝试使用 Jest documentation 中描述的 ES6-Class 模拟来执行此操作，但令牌始终是 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)
  })
})

我哪里错了？据我了解上述笑话文档以及 this post 这种模拟实现的方式应该影响测试功能？！

Answer 1

这是因为您正在导出对象而不是 class。所以嘲笑是行不通的。您可以手动使用 javascript 覆盖函数、对象和 class 的功能（由 jest 内部使用）。测试代码将如下所示

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)
    })
})

或者在模拟自身时你可以return对象而不是函数

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)
    })
})

并且createFetchHeaders中import错误，需要这样

import AuthStore from '../stores'

您不需要“{}”，因为您默认导出 AuthStore。

如何在测试使用它的函数时模拟 Mobx 存储的值

How to mock value of Mobx store when testing a function that uses it

javascript

reactjs

jestjs

mocking

mobx