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

Question

I have the following store:

import { observable, action } from "mobx";

class UiStore {
  @observable string;

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

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

export default UiStore;

And a simple test I am running with 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");
  });
});

But I am getting the following error:

TypeError: uiStore.setString is not a function

When I remove the @action decorator, the test will pass. But according to the mobx docs , the @action decorator significantly increases performance when the functions are modifying state. Does anybody know of a way to test mobx @actions?

Answer 1

Not using a arrow function solves this problem:

import { observable, action } from "mobx";

class UiStore {
  @observable string;

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

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

export default UiStore;

No idea why though...

Answer 2

In order for decorators to work with class field methods you must ensure that when using the transform-decorators-legacy and transform-class-properties plugins that you put them in the right order in your .babelrc , for example:

Incorrect ✖

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

Correct ✔

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

Alternatively you may use the @action.bound decorator on a class method, which will bind it as if it was a class field method, as Miha suggested in his answer.