Unable to unit test Vue3 component using Pinia

[ShaktiMandal]

Hi

Recently, I was trying to perform one of my vue3 component but getting unexpected test result.

---- > This is the component, I was trying to test.

There two stores are being used inside the ChildComponent. Both stores receive the data when ParentComponent renders, thus, ChildComponent also gets the data. My approach is to just test ChildComponent component without mounting ParentComponent. As ChildComponent uses two store which receives the data when ParentComponent renderds, I had to mock those two stores to make sure that when child componenets mouts store has data. Below are the snippets of the code. I have two queries as I am not clear about it.

Query 1: Why store does not have any data even after initializing it ? If my initialization is wrong, how to initialize it ?
Query 2: If component requires two stores then how I can initialize two stores ?

beforeEach( ()=> {
let store1 = useStore1();
let store2 = useStore2();

// update mock data for the store.
store1 = updateMockData1();
store2 = updateMockData2();

// create pinia testing
const piniaTesting = createPiniaTesting();
piniaTesting.state.value.store [Name of the original store] = store1; // Initialize the store

const wrapper = mount( childComponent, {
global: {
plugins: [piniaTesting] // Pass the store
}
})

});

// Test case for select drop down from child component
it('Test select component', () => {
const component = wrapper.findComponent(Select);
const ul = component.find('ul');
const itemList = ul.elememt.children;

// Should itemList has same value whatever is in the store but count is 0.
// So basically, its not picking up the data from the store.

});

Please note, I am using vitest.

It would be really helpful, if I can get some feedback on this please.

@posva