无法读取未定义的属性 $socket - 测试 socket.io

Question

我正在使用 VueJS 和 socket.io 生成一条消息以显示给我的应用程序的所有用户。 我的信息是从我的商店操作中发出的。 它运行良好，但是当我测试我的代码时，出现错误：“无法读取未定义的属性 $socket”（来自我的操作）。

我的 main.js：

/*Socket*/
import io from 'socket.io-client'

if(window.location.hostname === 'localhost'){
    //Dev
    console.log('Dev')
    Vue.prototype.$socket = io(`http://localhost:3000`) 
}else{
    //Prod
    console.log('Prod')
    Vue.prototype.$socket = io.connect(window.location.hostname)
}

Vue.use(Vuelidate)
Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

我对我的商店的操作：

const addPick = function(context) {
    //console.log('actions - ADD PICK');
    let request_body = {
      game_id : context.state.selectedGame.id,
      player_id : context.state.pickedPlayer.id,
      user_id : context.state.user.id
    }
    axios.post(`api/add_picked_player`,request_body).then(response => {
      console.log(response.data);
      //Building of the message to display to the other players
      let object_to_emit = {};
      object_to_emit = {
        message : context.state.pickedPlayer.name + ' has been selected by '+context.state.user.username,
        game_id : context.state.selectedGame.id
      }
      this._vm.$socket.emit('player_added',object_to_emit);
      
      this.dispatch('getDraftList'); //to update the player available in the draft 
      this.dispatch('getUserListInGame'); //to update the user information in the game in the UserLineUp component
      context.commit('UpdateUserListInGame',context.state.userListInGame);
      this.dispatch('getPickedTeamByUser'); //to update the team picked of the user
    }).catch(error => console.log(error));
};

我的测试：

import io from 'socket.io-client'
/*Mocking of Socket io*/
let mockSocket = io('http://localhost:3000');
let message = "message to send";
jest.mock("socket.io-client", () => {
    const socket = {
      emit: jest.fn(() => { 
        return new Promise((resolve) => {
          resolve(true)
        })
      })
    }
  return jest.fn(() => socket);
})

describe('addPick', () => {
  test('Success: should add a player and update information (player available, user in the game, team picked by users) in the store', async () => {
    const context = {
      state: {
        selectedGame: {
          id:119
        },
        pickedPlayer: {
          id:1
        },
        user: {
          id:1
        },
        userListInGame: [
        {
          id:1
        },{
          id:19
        }
        ]
      },
      commit: jest.fn()
    }
    const response = {
      data: "the draft is not finished"
    };
    //const dispatch = jest.fn();

    axios.post.mockResolvedValue(response) //OR axios.post.mockImplementationOnce(() => Promise.resolve(response));
    await actions.addPick(context)
    expect(axios.post).toHaveBeenCalledWith("api/add_picked_player",{
      "game_id" : context.state.selectedGame.id,
      "player_id" : context.state.pickedPlayer.id,
      "user_id":context.state.user.id
    });
    expect(axios.post).toHaveBeenCalledTimes(2)
    //expect(context.commit).toHaveBeenCalledWith("UpdateUserListInGame", context.state.userListInGame)

    expect(io).toHaveBeenCalledWith(`http://localhost:3000`)
    expect(io).toHaveBeenCalledTimes(1)
    await mockSocket.emit("player_added",message)
    expect(mockSocket.emit).toHaveBeenCalledTimes(1)
    expect(mockSocket.emit).toHaveBeenCalledWith("player_added",message)
    //expect(context.commit).toHaveBeenCalledWith("UpdateUserListInGame", context.state.userListInGame)
  });

我模拟了 Axios 并且我的 axios 请求被成功调用。 我的发射 io 插座的 function 也是如此。 测试现在成功，但是：

• 我的操作的 console.log 中有错误消息：“无法读取未定义的属性 $socket”
• 当我尝试测试 expect(context.commit).toHaveBeenCalledWith("UpdateUserListInGame", context.state.userListInGame) 时，由于我的套接字 io 出现错误。 这个错误是 context.commit 没有被调用。 （此测试成功，没有发出所有消息和我的套接字 io 部分）

怎么了？

1. 我在 main.js 中参数我的套接字 IO 的方式？
2. 我如何调用我的 emit() function？ 我还有另一种使用“this._vm”的可能性吗？