$patch-ing pinia store in test

[hewIngram]

Question

I'm curious what the best way of awaiting a $patch change in a test to be awaited to see the component update.

If I have a simple list component:

<template>
    <div>
        <div v-for="item in testExampleStore.list" :key="item.id" :class="$style.listSection">
            <input type="checkbox" v-model="checkedItems" :value="item.id" />
            <p>{{ item.name }}</p>
            <p>{{ item.text }}</p>
        </div>
    </div>
</template>

<script lang="ts">
import { mapStores } from 'pinia'
import { useTestExmapleStore } from '@/stores/testExample'

export default {
    name: 'TestPage',
    data() {
        return {
            checkedItems: [] as number[]
        }
    },
    computed: {
        ...mapStores(useTestExmapleStore)
    }
}
</script>

And my TestExample store initializes with a list of length 3 I can correctly assert that I see 3 checkboxes in the component.
In a test like this where I patch the initial store value from the test:

it('patch reflected in component', async () => {
        const wrapper = mount(TestExamples, {
            global: {
                plugins: [createTestingPinia()],
              },
        })

        const store = useTestExmapleStore()
        expect(store.list.length).toBe(3)

        store.$patch({ list: [
            {
                id: 1,
                name: 'item 1',
                text: 'this is the item 1 text'
            },
            {
                id: 2,
                name: 'item 2',
                text: 'this is the item 2 text'
            },
            {
                id: 3,
                name: 'item 3',
                text: 'this is the item 3 text'
            },
            {
                id: 4,
                name: 'item 4',
                text: 'this is the item 4 text'
            },
            {
                id: 5,
                name: 'item 5',
                text: 'this is the item 5 text'
            },
            {
                id: 6,
                name: 'item 6',
                text: 'this is the item 6 text'
            }
        ]})

        // The value in the store is updated immediately
        expect(store.list.length).toBe(6)
        // but in the component I'll still only see 3 checkboxes.

        // Doing either of await nextTick() or await flushPromises() here works as expected

        await nextTick()

        // and we can see it in the component too:
        const multiCheckboxList = wrapper.find({ ref: 'multiCheckboxList' })
        expect(multiCheckboxList.findAll('input[type="checkbox"]').length).toBe(6)
    })

The question I have is it appears that I can just await the $patch itself and get the same result as using nextTick().
Is this valid or sensible?
I can't spot any mention of it in the docs. Is $patch itself async or is something else happening here?

Thanks in advance

[posva]

The question I have is it appears that I can just await the $patch itself and get the same result as using nextTick().
Is this valid or sensible?

Awaiting $nextTick() is better as $patch() doesn't return a promise, it just turns out the pending ticks, including the dom updates, are able to run.

[hewIngram]

That makes sense - thanks for clarifying @posva