MobX 调用 makeObservable 配合 Jest 测试时报字段不存在错误如何解决

这个报错的核心原因是makeObservable调用时，todos和filter两个类字段尚未挂载到类实例上，MobX扫描不到对应字段所以抛出异常。你目前的代码里仅对字段做了TypeScript类型声明，没有提前初始化，且赋值操作放在了makeObservable之后，运行时实例上不存在对应字段。
makeAutoObservable没有报错是因为它内部会自动追踪后续挂载到实例上的字段，自动标注为可观察，所以不会触发字段不存在的错误。

以下两种方案都不需要使用装饰器，也不用替换为makeAutoObservable：

• 方案1：类属性声明时直接初始化默认值

export class TodoStore {
  // 声明时直接赋值，实例创建时字段就会存在
  todos: Todo[] = []
  filter: string = ""

  constructor() {
    makeObservable(this, {
      todos: observable,
      filter: observable
    })
  }
  createTodo(value: any) {
    this.todos.push(new Todo(value))
  }
}

• 方案2：调整constructor内的执行顺序，把字段赋值移到makeObservable调用前

export class TodoStore {
  todos: Todo[]
  filter: string

  constructor() {
    // 先给字段赋值，保证实例上存在对应字段后再调用makeObservable
    this.todos = []
    this.filter = ""
    makeObservable(this, {
      todos: observable,
      filter: observable
    })
  }
  createTodo(value: any) {
    this.todos.push(new Todo(value))
  }
}

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