tmpl-cli
api
docs
env
git
hbs
html
husky
jest
lintstaged
lisp
node
prettier
python
react
Summaryreact context [name]react fc [name]react fc [name] -c contextNamereact fc [name] -m mobxStoreNamereact fc [name] -treact initreact mst [name]
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", () => {
// Arrange
const 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} />);
// Act
fireEvent.click(getByTestId("action"));
// Assert
const 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();