React组件类方法调用静态方法触发TypeError的问题排查

这个报错的根源很明确——你把静态方法当成实例方法来调用了！isAddressReady是挂载在DeliveryAddressScreen类本身的静态方法，不属于任何类实例，所以在实例方法sendAddress里用this.isAddressReady去访问自然会报错。

下面给你几种解决思路，从修复代码本身到测试Mock都有：

1. 修正组件内的调用方式（最推荐，从根源解决） #

直接在实例方法里通过类名调用静态方法，而不是this：

class DeliveryAddressScreen extends Component {
  static isAddressReady(address) {
    return !!(address)
  }
  sendAddress(address) {
    // 用类名调用静态方法，而不是this
    if(DeliveryAddressScreen.isAddressReady(address)) {
      // DO SOMETHING
    }
  }
}

这样修改后，不管是正常运行还是测试，都不会再出现这个报错，这也是静态方法的正确使用方式。

2. 若不想修改组件代码，在测试中Mock静态方法 #

如果你暂时不想改动业务代码，只想让测试通过，可以用测试框架（比如Jest）Mock类的静态方法：

it('sample tests', () => {
  // 拦截静态方法，强制返回true
  jest.spyOn(DeliveryAddressScreen, 'isAddressReady').mockReturnValue(true);
  
  const component = shallow(<DeliveryAddressScreen />)
  component.instance().sendAddress('Address')
  
  // 可选：验证静态方法是否被正确调用
  expect(DeliveryAddressScreen.isAddressReady).toHaveBeenCalledWith('Address');
  expect(true).toBe(true) // Just a sample
})

⚠️ 注意：这种方式只是测试层面的临时 workaround，本质上组件内的this.isAddressReady写法是错误的，长期来看还是建议用第一种方法修复。

3. 将静态方法改为实例方法（如果不需要静态调用） #

如果这个方法不需要被DeliveryAddressScreen.isAddressReady()这种方式直接调用，只是实例内部使用，那可以直接去掉static关键字，把它变成实例方法：

class DeliveryAddressScreen extends Component {
  // 去掉static，变成实例方法
  isAddressReady(address) {
    return !!(address)
  }
  sendAddress(address) {
    if(this.isAddressReady(address)) {
      // DO SOMETHING
    }
  }
}

这种方式下，this.isAddressReady的调用就完全合法了，测试也能正常运行。

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