[MST] Test mobx-state-tree Models by Recording Snapshots or Patches

Testing models is straightforward. Especially because MST provides powerful tools to track exactly how your state changes over time. Track snapshots, action invocations or even patches to verify the correctness of your actions!

In this lesson you will learn:

• To obtain immutable snapshots of the state using getSnapshot
• To record snapshots using onSnapshot
• To store and test modifications over time using onPatch
• Using Jest‘s snapshot test feature to verify snapshots and patches
• That MST can infer the type of a snapshot for you

Instead of doing test like:

it("can add new items", () => {
    const list = WishList.create()
    list.add(
        WishListItem.create({
            name: "Chesterton",
            price: 10
        })
    )

    expect(list.items.length).toBe(1)
    expect(list.items[0].name).toBe("Chesterton")
    list.items[0].changeName("Book of G.K. Chesterton")
    expect(list.items[0].name).toBe("Book of G.K. Chesterton")
})

We can use snapshot, a more powerful way to test state:

Using ‘getSnaphost‘ from ‘mobx-state-tree‘ and ‘toMatchSnapshot()‘ from the Jest:

it("can add new items", () => {
    const list = WishList.create()
    list.add({
        name: "Chesterton",
        price: 10
    })

    expect(getSnapshot(list)).toMatchSnapshot()

    expect(states).toMatchSnapshot()
})

We can also use a listener to listen the state changes:

it("can add new items", () => {
    const list = WishList.create()
    const states = []
    onSnapshot(list, snapshot => {
        states = [...state, snapshot]
    })

    list.add({
        name: "Chesterton",
        price: 10
    })


    expect(getSnapshot(list)).toMatchSnapshot()

    expect(states).toMatchSnapshot()
})

Sometimes we might don‘t need to check the whole state tree, we only change part of state, such as an object‘s name, then what we can use is ‘onPatch‘ from ‘mobx-state-tree‘:

it("can add new items - 2", () => {
    const list = WishList.create()
    const patches = []
    onPatch(list, patch => {
        patches.push(patch)
    })

    list.add({
        name: "Chesterton",
        price: 10
    })

    list.items[0].changeName("Google")

    expect(patches).toMatchSnapshot()
})

In the code, we only change the name:

list.items[0].changeName("Book of G.K. Chesterton")

Patch snapshot looks like:

exports[`can create a wishlist - onPatch toMatchSnapshot 1`] = `
Array [
  Object {
    "op": "replace",
    "path": "/items/0/name",
    "value": "Google",
  },
]
`;

The ‘path‘ prop tells which prop on the object has been changed to what.

Therefore it is also easy to do undo redo.

• onPatch(model, listener) attaches a patch listener to the provided model, which will be invoked whenever the model or any of its descendants is mutated
• applyPatch(model, patch) applies a patch (or array of patches) to the provided model
• revertPatch(model, patch) reverse applies a patch (or array of patches) to the provided model. This replays the inverse of a set of patches to a model, which can be used to bring it back to its original state

Link