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

  • 相关阅读:
    ubuntu進入dos界面命令 ubuntu進入圖形界面命令
    CentOS 8.2远程连接vncserver升级后1.10.1无法启动解决记录
    Eclipse:Cannot complete the install because of a conflicting dependency.问题解决
    Android SDK更新以及ADT更新出现问题的解决办法
    Visual Studio 2013开启JavaScript的智能提示功能
    linux中mysql密码找回的两种方式
    Oracle 物化视图 说明
    linux下mysql字符集编码问题的修改
    mysql 启动错误-server PID file could not be found
    在linux安装mysql,并设置远程访问
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8337938.html
Copyright © 2011-2022 走看看