Below are the code snippets I'm working with:
Test.vue
<template>
<button v-show="store.common == 'hi'" @click="func">
hello world
</button>
</template>
<script setup>
import {mainStore} from './index.js'
import {check} from './check.js'
function func() {
check();
}
</script>
check.js
import {mainStore} from './index.js'
// This store needs to be defined in this project.
let store = mainStore();
function check() {
// The store may be updated, for example from backend.
store.common = 'hello';
}
export {check};
index.js
import {defineStore} from "pinia"
export const mainStore = defineStore('main', {
state: () => {
return {
common: 'hi',
}
},
getters: {},
actions: {},
})
My test file, temp.cy.js
import {mount} from 'cypress/vue'
import { createApp } from 'vue'
import Test from './Test.vue'
import {createPinia, setActivePinia} from "pinia"
describe('for example', () => {
const app = createApp({});
beforeEach(() => {
const pinia = createPinia();
app.use(pinia);
setActivePinia(pinia);
});
it('render', () => {
mount(Test);
});
})
When running this test, an error occurs:
getActivePinia was called with no active Pinia. I attempted to modify the code in check.js as follows:
import {mainStore} from './index.js'
// This store needs to be defined in this project.
let store = null;
function getStore() {
if (store === null) {
store = mainStore();
}
}
function check() {
getStore();
store.common = 'hello';
}
export {check};
or
import {mainStore} from './index.js'
import {onBeforeMount} from 'vue'
// This store needs to be defined in this project.
let store = null;
onBeforeMount(() => {
store = mainStore();
});
function check() {
store.common = 'hello';
}
export {check};
Subsequently, the component stops rendering and an error is thrown:
Cannot read properties of undefined (reading common)