Comments (6)
Vitest setup files to the rescue:
// vite.config.ts
export default defineConfig({
test: {
root: './src/',
setupFiles: ['./setup.ts'],
}
})
// src/plugins/i18n.ts
import { createI18n } from 'vue-i18n';
export default createI18n({
// ...
});
// src/setup.ts
import i18n from '@/plugins/i18n';
import { config } from '@vue/test-utils';
// @ts-expect-error type
if (!globalThis.defined) {
config.global.plugins = [i18n];
// @ts-expect-error type
globalThis.defined = true;
}
from vue-testing-library.
I'm using Vue 3 with script setup (Single File Component) and Jest.
my_i18n_lib_path/i18n.ts:
import { I18n, createI18n } from 'vue-i18n';
const i18n: I18n = createI18n({
legacy: false,
locale: 'en',
messages: {},
missing: (locale, key) =>
console.error('Translation not found! Locale:', locale, 'translation key:', key),
});
the SFC myComponent.vue file:
import { useI18n } from 'vue-i18n';
<script setup lang="ts">
const { t } = useI18n();
then the test:
import { shallowMount } from '@vue/test-utils';
import { i18n } from 'my_i18n_lib_path/i18n';
describe('myComponent.vue', () => {
it('Should eat onions like apples', () => {
// Arrange
const wrapper = shallowMount(myComponent, {
global: {
plugins: [i18n],
mocks: { t: (key: string) => key },
},
});
});
});
Hope this helps someone, or if it can be improved, just share.
from vue-testing-library.
if anyone still having the issue
import { vi } from 'vitest';
vi.mock('vue-i18n', () => ({
useI18n: () => ({
t: (key: string) => key,
d: (key: string) => key,
}),
}));
fond solution from here
from vue-testing-library.
Has anyone a solution yet? - Struggling with the same problem
from vue-testing-library.
I added config.global.plugins = [VueI18n]
to setup.ts
.
Then, I used this in my test:
const { getByTestId } = render({
...ResultsForAttemptVue,
setup() {
return { t: useI18n().t };
},
});
This seems very hackish, but nothing else would work.
from vue-testing-library.
I don't know why, but in my case this was happening because I use pinia. Once I set pinia as plugin everything worked. So if anyones struggling with this. Try it
import { createTestingPinia } from '@pinia/testing'
render(MessagesList, {
props,
global: {
stubs: [
'router-view',
'vue-i18n',
],
plugins: [
createTestingPinia(),
[plugin, defaultConfig],
],
},
}),
from vue-testing-library.
Related Issues (20)
- Unable to make mocking or stubs HOT 3
- ESM export HOT 1
- Is this a valid test? HOT 1
- Problem using `testing-library` with vue <script setup> HOT 1
- Multi-root node components aren't cleaned properly up after each test HOT 3
- Doesn't cleanup with vitest by default HOT 1
- Rendering of child components does not work with @vue/compat HOT 1
- How do I test the hook of beforeRouteEnter in the version of vue 2.6.14
- Passing data to a component using the composition api HOT 1
- Teleport containing element with v-if does not render at all HOT 1
- Type safe render options (props, slots, emits) HOT 1
- Unable to use with vue 3.3.x
- 8.0.0 makes it impossible to run with vitest and no global afterEach HOT 1
- after manually calling the umount method, cleanupAtWrapper will report an error HOT 1
- Vuetify Example 404s
- TypeScript v8.1.0: Cannot find module 'type-fest' or its corresponding type declarations - RemoveIndexSignature HOT 1
- document.activeElement state lost after rendering
- Vue-I18n translations bugs with Vue Testing Library, but working with Vue Test Utils.
- Auto importing Vue Testing Library in test files does not work if project is using TypeScript HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-testing-library.