测试中Mobx Observable更新后Computed未执行，组件未重渲染求助

嘿，我之前也碰到过好几次这种MobX响应式链路断了的情况，给你梳理几个最可能的排查方向，一步步来定位问题：

1. 先确认Component1有没有被observer包裹 #

这是最容易踩的坑！如果你的React组件没被MobX的observer高阶组件包裹，MobX根本没法追踪组件里用到的响应式值，就算observable更新了，组件也不会重渲染。

看你的Component1代码是不是类似这样的错误写法：

// ❌ 错误：没加observer，MobX无法追踪组件内的响应式依赖
class Component1 extends React.Component {
  render() {
    return <div>{this.name}</div>;
  }
}

正确的姿势必须用observer包裹组件：

// ✅ 正确：用observer包裹，让MobX监听组件内的响应式值
import { observer } from 'mobx-react';

@observer
class Component1 extends React.Component {
  get name() {
    return store.computedName; // 这里要确保取的是Store里的computed/observable值
  }
  render() {
    return <div>{this.name}</div>;
  }
}

2. 检查@computed的依赖是否真的关联了目标observable #

有时候你以为computed依赖了observable，但实际代码里可能没用到。比如：

// ❌ 错误：computed没用到被更新的observable，更新后自然不会触发重计算
class Store {
  @observable _name = '初始值';
  
  @computed get name() {
    return '固定文本'; // 根本没用到this._name，白搭
  }

  @action setName(newName) {
    this._name = newName;
  }
}

要确保computed明确依赖了被action更新的那个observable：

// ✅ 正确：computed直接依赖this._name，更新时会触发重新计算
class Store {
  @observable _name = '初始值';
  
  @computed get name() {
    return this._name; // 这里必须用到被更新的observable
  }

  @action setName(newName) {
    this._name = newName;
  }
}

另外，如果computed里有异步操作、非MobX管理的变量，也会导致依赖追踪失效，这点也要留意。

3. 确认组件和测试用的是同一个Store实例 #

有时候测试里不小心new了一个新的Store，而组件用的是全局单例，结果就是：你在测试里调用setName更新的是测试实例，组件监听的却是另一个完全无关的实例，当然不会变。

简单的排查方法：在组件的render里和测试代码里都打印console.log(store)，看两个实例的引用是否一致。如果不一样，那就是实例不统一的问题，要确保测试和组件用同一个Store。

4. 检查@action里的更新逻辑是否符合MobX规范 #

虽然你说setName被正确调用了，但如果action里有异步操作，直接更新observable是不行的！MobX的action只能追踪同步更新，异步里的更新必须用runInAction包裹：

// ❌ 错误：异步操作里直接更新，MobX不会追踪
@action setName(newName) {
  fetch('/some-api').then(() => {
    this._name = newName; // 这里的更新不在action上下文里，无效
  });
}

正确的写法是用runInAction把异步里的更新包起来：

// ✅ 正确：异步更新用runInAction包裹
import { runInAction } from 'mobx';

@action setName(newName) {
  fetch('/some-api').then(() => {
    runInAction(() => {
      this._name = newName;
    });
  });
}

如果你的setName是纯同步的，那这条可以跳过，但如果有异步逻辑，一定要检查这个点。

5. 测试中是否等待了组件重渲染完成 #

在测试里，MobX的更新是同步的，但React组件的重渲染可能有延迟（尤其是用React Testing Library的时候），如果你刚调用setName就立刻断言，组件可能还没来得及重渲染。

试试用findByText（它会等待组件更新）代替getByText：

// ✅ 正确：等待组件重渲染完成后再断言
test('更新名称后组件显示正确', async () => {
  const { findByText } = render(<Component1 />);
  store.setName('新名字');
  expect(await findByText('新名字')).toBeInTheDocument();
});

或者用MobX的when工具来等待状态更新：

import { when } from 'mobx';

test('更新名称后组件显示正确', async () => {
  const { getByText } = render(<Component1 />);
  store.setName('新名字');
  await when(() => store.name === '新名字'); // 等待computed值更新完成
  expect(getByText('新名字')).toBeInTheDocument();
});

你可以先从第1点开始排查（毕竟observer没加是最常见的原因），然后依次检查后面的点，应该能很快找到问题所在。

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