JavaScript如何实现类实例多级嵌套属性访问满足Jest模块打桩需求

你可以根据使用场景二选一：

固定嵌套层级实现 #

如果你的属性访问路径是固定的（比如确定为prop1.prop2.prop3），直接在类构造函数中初始化嵌套结构即可：

class Test2 {
  getAll() {
    return 'Salutes'
  }
}

class Test {
  constructor() {
    // 预定义固定的嵌套层级
    this.prop1 = {
      prop2: {
        prop3: new Test2()
      }
    }
  }
}

// 调用测试
const myTest = new Test()
const result = myTest.prop1.prop2.prop3.getAll()
console.log(result) // 输出：Salutes

通用任意层级打桩实现（Jest场景推荐） #

如果打桩时不需要固定路径，希望支持任意深度的属性访问，用Proxy做动态代理就可以实现，不需要提前定义所有层级：

// 深层代理生成工具函数
const createDeepStub = (mockMethod) => {
  return new Proxy({}, {
    get(target, prop) {
      // 访问到目标方法时返回mock实现
      if (prop === 'getAll') {
        return mockMethod
      }
      // 其他属性继续返回代理实例，支持无限层级访问
      return createDeepStub(mockMethod)
    }
  })
}

class Test {
  constructor() {
    // 把根属性指向代理即可
    this.prop1 = createDeepStub(() => 'Salutes')
  }
}

// 调用测试，任意中间层级都可以正常访问
const myTest = new Test()
const result1 = myTest.prop1.prop2.prop3.getAll()
const result2 = myTest.prop1.foo.bar.baz.getAll()
console.log(result1) // Salutes
console.log(result2) // Salutes

如果你在Jest中做模块mock，可以直接按如下写法使用：

// 示例：mock名为./test的模块
jest.mock('./test', () => {
  const createDeepStub = () => {
    return new Proxy({}, {
      get(target, prop) {
        if (prop === 'getAll') return jest.fn(() => 'mock返回值')
        return createDeepStub()
      }
    })
  }
  return {
    Test: class {
      constructor() {
        this.prop1 = createDeepStub()
      }
    }
  }
})

该实现为纯原生JS代码，不需要TypeScript支持，适配所有Jest原生JS运行环境

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