如何解决Jest Fake Timer测试类方法中setTimeout的this指向问题？

你遇到的问题核心是类方法作为setTimeout回调时，this上下文丢失——直接传递this.doAsync给setTimeout，回调执行时this不再指向类实例，而是变成null（严格模式下），所以会抛出Cannot read properties of null (reading 'doAsync')的错误。

以下是三种可行的解决方式：

1. 使用箭头函数包裹回调 #

箭头函数会继承当前作用域的this，确保调用时this指向类实例：

class Test {
  doAsync() {
    setTimeout(() => this.doAsync(), 1000)
  }
}

jest.useFakeTimers()

test("setTimeout with class method", async () => {
  new Test().doAsync()
  jest.advanceTimersByTime(2500)
  expect(setTimeout).toBeCalledTimes(3)
})

2. 在构造函数中绑定this #

通过bind强制将方法的this绑定到类实例：

class Test {
  constructor() {
    // 绑定doAsync的this到当前实例
    this.doAsync = this.doAsync.bind(this)
  }
  doAsync() {
    setTimeout(this.doAsync, 1000)
  }
}

// 测试代码不变
jest.useFakeTimers()

test("setTimeout with class method", async () => {
  new Test().doAsync()
  jest.advanceTimersByTime(2500)
  expect(setTimeout).toBeCalledTimes(3)
})

3. 使用类字段箭头函数定义方法 #

用箭头函数作为类字段，自动绑定this到实例：

class Test {
  // 类字段箭头函数，this始终指向实例
  doAsync = () => {
    setTimeout(this.doAsync, 1000)
  }
}

// 测试代码不变
jest.useFakeTimers()

test("setTimeout with class method", async () => {
  new Test().doAsync()
  jest.advanceTimersByTime(2500)
  expect(setTimeout).toBeCalledTimes(3)
})

以上三种方式都能解决this指向问题，让你的Jest测试正常运行，验证setTimeout的调用次数。

内容的提问来源于stack exchange，提问作者yelliver