如何在单元测试中为 Pinia Store 设置初始状态？

2024-03-02 21:10:05

如何在单元测试中填充 Pinia Store 的初始状态

Pinia 是一个用于管理 Vuex 状态的轻量级库。它提供了一个方便的方式来创建、使用和测试状态。在单元测试中，填充 Pinia Store 的初始状态很重要，以便对你的应用程序中的各种行为进行全面的测试。

问题

如果你想在测试中使用“测试”数据初始化 Store，你可能会遇到一个常见的问题：你的 Store 可能没有被正确初始化，导致你的测试失败。

解决方案：使用 useSnapshot 钩子

为了使用“测试”数据初始化 Store，可以使用 useSnapshot 钩子函数：

const sortedValues = [...someValues].sort()
let store;

beforeEach(() => {
    store = useSnapshot(useMyStore, {
        initialState: {
            myProp: sortedValues
        }
    })
})

it("should sort the list and get the sorted list back", async () => {
    store.publicMethod()

    expect(store.getMyProp).toEqual(sortedValues)
})

步骤详解

使用 sortedValues 定义预期输出。
使用 useSnapshot 钩子函数创建 Store 的快照，并使用 initialState 选项指定初始状态。
在测试中，调用 store.publicMethod()，该方法会对 Store 中的数据执行排序操作。
断言 store.getMyProp 等于预期输出 sortedValues。

其他方法

除了 useSnapshot 钩子，还可以使用其他方法来填充 Pinia Store 的初始状态：

beforeEach 钩子： 在 beforeEach 钩子中，使用 pinia.set() 方法直接设置 Store 的状态。然而，这种方法可能存在覆盖其他测试中的状态更改的风险。
useDefineStoreOptions 选项： 使用 useDefineStoreOptions 选项，可以在创建一个 Store 时指定初始状态。这种方法需要修改 Store 本身，可能不适用于所有情况。