Question

我正在测试，其中包括对端点的axios调用。我想模拟对端点的调用并返回一些自定义数据，以便在每次测试时都不会访问服务器。

这是它自己的action.js文件中的操作代码。

login ({commit}, user)  {
  return new Promise((resolve, reject) => {
    axios.post('https://backendauth.free.beeceptor.com/api/login', user)
     .then(resp => {
       console.log('response here')
       console.log(resp)
       console.log(resp.data)
       const token = resp.data.success.token
       const user = resp.data.user
       localStorage.setItem('token', token)
       axios.defaults.headers.common["Authorization"] = "Bearer " + token;
       commit('LOGIN_SUCCESS', token, user)

在登录操作时，呼出到端点，该端点返回一个令牌，该令牌存储在本地存储中。该令牌还附加在axios默认标头上，因此我不必每次要在应用程序中进行axios调用时都附加该令牌。

现在开始测试。我编写了一个成功模拟axios帖子的测试，但是在设置模拟的默认标题时失败并显示错误。

这是错误

TypeError: Cannot read property 'headers' of undefined

  37 |           const user = resp.data.user
  38 |           localStorage.setItem('token', token)
> 39 |           axios.defaults.headers.common["Authorization"] = "Bearer " + token;
     |                          ^
  40 |           commit('LOGIN_SUCCESS', token, user)
  41 |           resolve(resp)
  42 |         })

这是包括模拟在内的测试

    import actions from "../../src/store/actions";

let url = "";
let body = "";

jest.mock("axios", () => ({
  post: (_url, _body, config) => { 
    return new Promise((resolve) => {
        resolve({'data' : {'success': {'token' : 'test'}}})
    })
  },


}))


describe('login action', () => {
    it("let the user login and access login success mutator", async() => {
        const commit = jest.fn()
        const username = 'test'
        const password = 'test'

        await actions.login({commit}, {username, password})
    })
})

开玩笑的模拟是一个完整的模拟，它在调用时会返回一个带有我所需数据的Promise，但是在尝试设置标头时代码失败。有没有办法我也可以对此进行模拟？还是需要以其他方式编写模拟？

Answer 1

这是您为有相同问题的任何人执行的操作。 Npm安装axios-mock-adapter，然后使用以下代码，但根据需要进行更改。

import actions from "../../src/store/actions";
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
describe('login action', () => {
    it("let the user login and access login success mutator", async() => {


        let mockAdapter = new MockAdapter(axios);

        mockAdapter.onPost('https://hotel-dev.devtropolis.co.uk/api/apilogin').reply(200, {
              token: 'test token',
              user: {username: 'test', password: 'test'}
          });


        const commit = jest.fn()
        const username = 'test'
        const password = 'test'

        await actions.login({commit}, {username, password})

    expect(axios.defaults.headers.common.Authorization).toBe('Bearer test token')

    expect(commit).toHaveBeenCalledWith(
      "LOGIN_SUCCESS",'test token', {username, password})
    })

})

使用玩笑时axios模拟无法处理默认标头

1 个答案: