开玩笑-测试mobx存储@action TypeError：不是函数

Question

我有以下商店：

import { observable, action } from "mobx";

class UiStore {
  @observable string;

  constructor() {
    this.string = "My string";
  }

  @action
  setString = value => {
    this.string = value;
  };
}

export default UiStore;

和一个简单的测试，我开玩笑：

import UiStore from "./UiStore";

describe("uiStore", () => {
  it("setString sets string to the passed value", () => {
    const uiStore = new UiStore();
    uiStore.setString("blah");
    expect(uiStore.string).toBe("blah");
  });
});

但是我收到以下错误：

TypeError：uiStore.setString不是函数

当我删除@action装饰器时，测试将通过。 但是根据mobx文档 ，当函数修改状态时， @action装饰器会显着提高性能。 有人知道测试mobx @actions的方法吗？

Answer 1

不使用箭头功能可解决此问题：

import { observable, action } from "mobx";

class UiStore {
  @observable string;

  constructor() {
    this.string = "My string";
  }

  @action
  setString(value) {
    this.string = value;
  }
}

export default UiStore;

不知道为什么...

Answer 2

为了使装饰器能够使用类字段方法 ，必须确保在使用transform-decorators-legacy和transform-class-properties插件时， .babelrc它们以正确的顺序放在.babelrc ，例如：

错误✖

"plugins": [
  "transform-class-properties",
  "transform-decorator-legacy",
]

正确✔

"plugins": [
  "transform-decorator-legacy",
  "transform-class-properties",      
]

或者，您可以在类方法上使用@action.bound装饰器，这将绑定它，就像它是类字段方法一样，正如Miha在他的回答中所建议的。