In this lesson, we introduce the running example of this course, a wishlist app. We will take a look at the core of mobx-state-tree (MST), models. Models describe the shape of your state and perform type validation.

You will learn:

• Defining models using types.Model
• Instantiating models from JSON using Model.create
• Primitive types: types.string & types.number
• Type inference for primitive types
• types.array
• types.optional
• Composing models into a model tree
• Testing models using jest

 

To create a model:

import { types } from "mobx-state-tree"export const WishListItem = types.model({    name: types.string,    price: types.number,    image: ""})export const WishList = types.model({    items: types.optional(types.array(WishListItem), [])})

'types' is similar to React PropTypes.

 

Once model is created, then we can write tests to verify:

import { WishList, WishListItem } from "./WishList"it("can create a instance of a model", () => {    const item = WishListItem.create({        name: "Chronicles of Narnia Box Set - C.S. Lewis",        price: 28.73    })    expect(item.price).toBe(28.73)    expect(item.image).toBe("")})it("can create a wishlist", () => {    const list = WishList.create({        items: [            {                name: "Chronicles of Narnia Box Set - C.S. Lewis",                price: 28.73            }        ]    })    expect(list.items.length).toBe(1)    expect(list.items[0].price).toBe(28.73)})