jest测试React class组件context provider方法时state未更新

问题根源 #

• 逻辑错误：禁用判断使用了旧的state值
  setProducts函数开头就解构了offset、total两个状态值，后续在请求成功的回调中做禁用判断时，用的还是调用函数那一刻的旧值，不是接口返回的最新totalCount和刚计算出的新偏移量newOffset。同时setState是异步更新，即使直接读取this.state也拿不到刚设置的最新值。
• 初始条件不满足：测试中初始offset为0，判断条件第一个要求offset !== 0，天然不满足进入分支的要求。
• 测试写法错误：直接修改wrapper.state().limit不会触发状态更新，设置的limit值根本不生效，导致newOffset计算不符合预期。

修复步骤 #

1. 修正组件内的判断逻辑 #

把禁用判断的取值改成最新的计算值和接口返回值，不要用旧的状态值：

await gqlRequest.post().then(({ products: { edges, totalCount } }) => {
  const newOffset = offset + limit;
  this.setState({
    // 提示：这里建议补充把edges处理后的新列表赋值给products，不然products永远是初始值，属于额外遗留bug
    products,
    total: totalCount,
    offset: newOffset,
  });
  this.setLoading(false);
  // 改用newOffset和totalCount判断
  if (newOffset !== 0 && totalCount !== 0 && newOffset >= totalCount) {
    this.setDisabled(true);
  }
});

2. 修正测试代码 #

使用setState修改状态，同时调整初始offset让判断条件可以命中：

// 替换原来直接修改wrapper.state().limit的写法
wrapper.setState({
  limit: result.products.totalCount,
  offset: 1 // 初始offset设为非0值，保证newOffset计算后满足判断条件
})

console.log(wrapper.state().offset); // 此时会输出1
await wrapper.instance().setProducts();
console.log(wrapper.state().offset); // 此时会输出2
// 后续断言保持不变即可

如果你的业务逻辑要求第一次调用setProducts时offset必须为0，也可以选择在测试中连续调用两次setProducts，第一次调用后offset会更新为非0值，第二次调用即可命中禁用分支。

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