I am trying to test a component that uses q-select
component from Quasar framework. When I try to do it and I use q-select
component, I get this error:
[Vue warn]: injection "_q_" not found.
[Vue warn]: Component is missing template or render function.
at <QSelect ... >
FAIL
TypeError: Cannot read properties of undefined (reading 'platform')
❯ useVirtualScroll node_modules/quasar/dist/quasar.client.js:20629:8
20627| const onVirtualScrollEvt = debounce_default(
20628| localOnVirtualScrollEvt,
20629| $q.platform.is.ios === true ? 120 : 35
| ^
20630| );
20631| onBeforeMount2(() => {
❯ setup node_modules/quasar/dist/quasar.client.js:20786:9
❯ callWithErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:195:19
❯ setupStatefulComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7572:25
❯ setupComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7533:36
❯ mountComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5861:7
❯ processComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5827:9
❯ patch node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5306:11
❯ ReactiveEffect.componentUpdateFn [as fn] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5971:11
❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:181:19
This is my component SwitchLang.vue
:
<template>
<q-select
:model-value="locale"
@update:model-value="selectLocale"
:options="localeOptions"
:label="$t('language')"
dense
borderless
emit-value
map-options
options-dense
style="min-width: 150px"
/>
</template>
<script setup>
import { useQuasar } from 'quasar'
import { localeOptions } from 'src/i18n/config'
import { useI18n } from 'vue-i18n'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const { locale } = useI18n({ useScope: 'global' })
const $q = useQuasar()
function selectLocale(newLocale) {
router.push({ params: { ...route.params, locale: newLocale } })
$q.cookies.set('locale', newLocale, { sameSite: 'Strict' })
}
</script>
This is my test SwitchLang.test.js
:
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-vitest'
import { createMemoryHistory, createRouter } from 'vue-router'
import { createI18n } from 'vue-i18n'
import routes from 'src/router/routes'
import { i18nBootConfig } from 'src/i18n/config'
import SwitchLang from './SwitchLang.vue'
installQuasarPlugin()
const router = createRouter({ history: createMemoryHistory(), routes })
const i18n = createI18n(i18nBootConfig)
describe('SwitchLang component', () => {
const wrapper = mount(SwitchLang, { global: { plugins: [router, i18n] } })
it('coordinates select-option with i18n locale', () => {
i18n.global.locale = 'es-ES'
console.log(wrapper.html())
expect(wrapper.get('select').value).toBe('es-ES')
})
})