api
docs
env
git
hbs
html
husky
jest
lintstaged
lisp
node
prettier
python
react
readme
schema
style
util
vue
web
$ tmpl react mst [name]
Create a mobx state tree model under src/stores.
Files
project
└─src
└──stores
└───__tests__
└────fooStore.test.jsx
└───fooStore.js
↑ fooStore.test.jsx
import React from "react";import { fireEvent, render } from "@testing-library/react";import { observer } from "mobx-react";import { fooStore } from "../fooStore";describe("fooStore", () => {describe("setValue()", () => {it("should set value to foo", () => {// Arrangeconst Component = observer(props => {return (<><span data-testid="action" onClick={() => props.fooStore.setValue("foo")}></span><span data-testid="result">{props.fooStore.value}</span></>);});const { getByTestId } = render(<Component fooStore={fooStore} />);// ActfireEvent.click(getByTestId("action"));// Assertconst actual = getByTestId("result").textContent;expect(actual).toEqual("foo");});});});
↑ fooStore.js
import { values } from "mobx";import { types } from "mobx-state-tree";export const fooModel = types.model({value: types.optional(types.string, "")}).views(self => ({get computedValue() {return values(self.value);}})).actions(self => ({setValue(newValue: string) {self.value = newValue;}}));export const fooStore = fooModel.create();