javascript - 在测试中更新可观察值时，mobx 计算函数不会重新运行

Question

我正在尝试为基于 mobx 的 react 编写单元测试。出于某种原因，当 @observable 值在 @action 中更新时，@computed 函数不会像您希望的那样重新运行预计。

代码:

商店

class NameStore {
    @observable name;

    @action setName(name) {
        this.name = name;
    }
}

组件 1

@observer
class Name {
    @computed get name() {
        if (this.props.nameStore.name) {
            return `${this.props.nameStore.name} is awesome!`;
        }

        return null;
    }

    render() {
        return (
            <div className="name">
                {this.name}
            </div>
        );
    }
}

组件 2

@observer
class Name {
    setName() {
        this.props.nameStore.setName(this.name);
    }

    render() {
        return (
            <form onSubmit={this.setName.bind(this)}>
                <input type="text" ref={input => this.name = input} />
            </form>
        );
    }
}

测试

define('Name component', () => {
    let markup;

    beforeEach(() => {
        const nameStore = new NameStore();
        markup = mount(
            <div>
                <Component1 nameStore={nameStore} />
                <Component2 nameStore={nameStore} />
            </div>
        );
    });

    it('should re-render name when updated', (done) => {
        expect(markup.find('.name').text()).to.be.blank;

        markup.find('form input').first().value = "john";
        markup.find('form').simulate('submit');

        expect(markup.find('.name').text()).to.equal("john is awesome")
    });
});

出于某种原因，在测试中，Component1 中 {this.name} 的实际值保持不变，即使我能够验证 商店中的 >setName 函数被正确调用并使用正确的值。

对于为什么 Component1 没有重新渲染的任何帮助，我们将不胜感激。

另外，这是一个人为的例子，因为实际的例子是专有的..如果这个例子感觉很愚蠢，请原谅我:)

谢谢!

Answer 1

错误很少:

• 这两个组件都没有扩展 React.Component
• @computed 应该在商店里
• input 应该绑定(bind)到 onChange 并更新它的 value
• 浏览器可能会提示 input 值未定义。最好设置为空字符串。
• input 值在event.target.value 中，ref={input => this.name = input} 会赋给this.name 到 html 组件。
• 处理表单的经验法则是调用event.preventDefault()

下面的代码是基于您的代码的完整工作示例:

import React from 'react';
import { observable, action, computed } from 'mobx';
import { observer } from 'mobx-react';

class NameStore {
  @observable name = '';

  @action
  setName = name => {
    this.name = name;
  }

  @computed
  get awesomeName() {
    return this.name ? `${this.name} is awesome!` : '';
  }
}

@observer
class NameField extends React.Component {
  render() {
    const { nameStore } = this.props;
    return <div className="name"> {nameStore.awesomeName} </div>;
  }
}

@observer
class NameInput extends React.Component {
  render() {
    const { nameStore } = this.props;
    return (
      <form>
        <input
          type="text"
          onChange={this.onChange}
          value={nameStore.name}
        />
      </form>
    );
  }

  onChange = e => {
    const { nameStore } = this.props;
    nameStore.setName(e.target.value);
    e.preventDefault();
  }
}

@observer
class App extends React.Component {
  nameStore = new NameStore();

  render() {
    return (
      <div>
        <NameField nameStore={this.nameStore} />
        <NameInput nameStore={this.nameStore} />
      </div>
    );
  }
}

export default App;

额外说明:由于使用了箭头函数，所以我不必调用.bind(this)。