zoukankan      html  css  js  c++  java
  • [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

  • 相关阅读:
    Evidence on the impact of sustained exposure to air pollution on life expectancy
    International Immunopharmacology/ Perinatal and early childhood environmental factors influencing allergic asthma immunopathogenesis
    Projections of the effects of climate change on allergic asthma: the contribution of aerobiology
    Word List 2
    GRE : TC21
    Grammar Mistake: What is a faulty tense sequence?
    Biology 02: Respiration
    127 super()方法详解
    128 类的多态和多态性
    126 菱形继承问题
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8337938.html
Copyright © 2011-2022 走看看