Question

我有以下商店：

import { observable, action } from "mobx";

class UiStore {
  @observable string;

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

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

export default UiStore;

我正在用jest运行一个简单的测试：

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 docs，@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中按正确顺序排列，例如：

不正确✖

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

正确✔

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

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

jest - 测试mobx store @action TypeError：不是函数

2 个答案: