开玩笑地模拟“this”对象上的方法

Posted

技术标签:

【中文标题】开玩笑地模拟“this”对象上的方法【英文标题】:Mocking a method on "this" object in jest 【发布时间】:2019-12-21 02:31:42 【问题描述】:

我有以下实现:

export const actions = 
  async submitPhoneNumber(context) 
    let data = await this.$axios.
        $get('https://jsonplaceholder.typicode.com/todos/1')
    // do something with data
    return data

  


当我运行测试时,我得到了

TypeError: 无法读取未定义的属性“$get”

如何模拟this.$axios.$get

我开玩笑地看着嘲笑global,但嘲笑global只是在嘲笑window.whatever。

我需要模拟 this 对象。

这是我的测试:

import  actions  from '@/store/channel-add'
import flushPromises from 'flush-promises'
describe('channel-add', () => 
  it('submits phone number and returns phone code hash', async () => 
    let data = await actions.submitPhoneNumber()
    await flushPromises()

    expect(data).toBeTruthy()
  )
)

【问题讨论】:

【参考方案1】:

解决办法如下:

index.ts:

export const actions = 
  // I don't know where you get $axios from this, you didn't give the completed code. so I made a fake one for the demo.
  $axios: 
    $get: url => ''
  ,
  async submitPhoneNumber(context) 
    let data = await this.$axios.$get('https://jsonplaceholder.typicode.com/todos/1');
    // do something with data

    data = this.processData(data);
    return data;
  ,

  // for demo
  processData(data) 
    return data;
  
;

index.spec.ts:

import  actions  from './';

actions.$axios = 
  $get: jest.fn()
;

describe('actions', () => 
  it('should mock action.$axios.$get method', () => 
    expect(jest.isMockFunction(actions.$axios.$get)).toBeTruthy();
  );
  it('should get data correctly', async () => 
    (actions.$axios.$get as jest.Mock<any, any>).mockResolvedValueOnce( userId: 1 );
    const actualValue = await actions.submitPhoneNumber();
    expect(actualValue).toEqual( userId: 1 );
    expect(actions.$axios.$get).toBeCalledWith('https://jsonplaceholder.typicode.com/todos/1');
  );
);

单元测试结果:

 PASS  src/mock-module/axios/index.spec.ts
  actions
    ✓ should mock action.$axios.$get method (4ms)
    ✓ should get data correctly (4ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        2.181s, estimated 3s

【讨论】:

以上是关于开玩笑地模拟“this”对象上的方法的主要内容,如果未能解决你的问题,请参考以下文章

如何开玩笑地模拟 VueAxios

开玩笑地从模拟文件中窥探模拟函数

开玩笑地模拟获取响应的 blob 的 fetch() 函数

如何开玩笑地模拟文件夹中的所有文件

如何开玩笑地模拟 i18next 模块

开玩笑地模拟 useDispatch 并在功能组件中使用该调度操作来测试参数