Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Unit tests not working since introducing vue-i18n
See original GitHub issueI included internationalization in my project (I decided to use vue-i18n lib) The translation works as expected, but when I run my unit tests, I have errors, note: The tests passed before adding vue-i18n.
My vue-i18n configuration (src/i18n/index.js):
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import fr from './fr'
import en from './en'
Vue.use(VueI18n)
export default new VueI18n({
locale: 'en',
fallbackLocale: 'en',
messages: {
en,
fr
}
})
The main.js:
import Vue from 'vue'
import Vuex from 'vuex'
import i18n from './i18n'
import App from './App'
import store from './store'
import router from './router'
Vue.use(Element)
Vue.use(Vuex)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
i18n,
store,
router,
template: '<App/>',
components: { App }
})
This my component, which I test (Home.vue):
<template>
<section class="hero">
<div class="hero-body">
<div class="container">
<h1 class="title">Welcome to Server Client Project (STP)!</h1>
</div>
<div style="text-color: black;">{{ $t("general.hello") }}</div>
or
<div style="text-color: black;">{{ $i18n.t("general.hello") }}</div>
or
<div style="text-color: black;">{{ $i18n.messages.fr.general.hello }}</div>
</div>
</section>
</template>
<script>
export default {
data() {
return {}
},
methods: {}
}
</script>
This is the test (Home.spec.js):
import Vue from 'vue'
import Home from '@/components/Home'
// I've also tried with this 2 lines, but is the same results. :( #####
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
describe('Home.vue', () => {
it('should render correct contents', () => {
const Constructor = Vue.extend(Home)
const vm = new Constructor().$mount()
expect(vm.$el.querySelector('h1').textContent)
.to.equal('Welcome to Server Client Project (STP)!')
})
})
The errors I get:
13 01 2018 11:25:21.560:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket ch-UPyobpSLXRsYVAAAA with id 80198143
ERROR LOG: '[Vue warn]: Error in render: "TypeError: undefined is not an object (evaluating 'i18n._t')"
(found in <Root>)'
ERROR LOG: TypeError{stack: 'http://localhost:9876/base/index.js?ef5c3f3eb42f0c73db3ae13d5804bcc7a8a395e7:13162:20
render@http://localhost:9876/base/index.js?ef5c3f3eb42f0c73db3ae13d5804bcc7a8a395e7:16593:29
_render@http://localhost:9876/base/index.js?ef5c3f3eb42f0c73db3ae13d5804bcc7a8a395e7:5265:26
updateComponent@http://localhost:9876/base/index.js?ef5c3f3eb42f0c73db3ae13d5804bcc7a8a395e7:3556:28
get@http://localhost:9876/base/index.js?ef5c3f3eb42f0c73db3ae13d5804bcc7a8a395e7:3906:29
Watcher@http://localhost:9876/base/index.js?ef5c3f3eb42f0c73db3ae13d5804bcc7a8a395e7:3895:15
mountComponent@http://localhost:9876/base/index.js?ef5c3f3eb42f0c73db3ae13d5804bcc7a8a395e7:3563:14
$mount@http://localhost:9876/base/index.js?ef5c3f3eb42f0c73db3ae13d5804bcc7a8a395e7:9220:24
$mount@http://localhost:9876/base/index.js?ef5c3f3eb42f0c73db3ae13d5804bcc7a8a395e7:11581:20
http://localhost:9876/base/index.js?ef5c3f3eb42f0c73db3ae13d5804bcc7a8a395e7:16573:62
callFn@http://localhost:9876/absolute/Users/vasilesambor/Documents/School/Sem2/Server-Client/server-client-project/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4481:25
run@http://localhost:9876/absolute/Users/vasilesambor/Documents/School/Sem2/Server-Client/server-client-project/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4473:13
runTest@http://localhost:9876/absolute/Users/vasilesambor/Documents/School/Sem2/Server-Client/server-client-project/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4969:13
http://localhost:9876/absolute/Users/vasilesambor/Documents/School/Sem2/Server-Client/server-client-project/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:5075:19
next@http://localhost:9876/absolute/Users/vasilesambor/Documents/School/Sem2/Server-Client/server-client-project/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4887:16
http://localhost:9876/absolute/Users/vasilesambor/Documents/School/Sem2/Server-Client/server-client-project/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4897:11
next@http://localhost:9876/absolute/Users/vasilesambor/Documents/School/Sem2/Server-Client/server-client-project/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4821:16
http://localhost:9876/absolute/Users/vasilesambor/Documents/School/Sem2/Server-Client/server-client-project/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:4865:9
timeslice@http://localhost:9876/absolute/Users/vasilesambor/Documents/School/Sem2/Server-Client/server-client-project/node_modules/mocha/mocha.js?8bf1d1adf34e719cca6e8f6915b9cd6eabf83d6b:82:27', line: 13162, sourceURL: 'http://localhost:9876/base/index.js?ef5c3f3eb42f0c73db3ae13d5804bcc7a8a395e7'}
Home.vue
✗ should render correct contents
undefined is not a constructor (evaluating 'vm.$el.querySelector('h1')')
webpack:///test/unit/specs/Home.spec.js:10:32 <- index.js:16575:32
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.072 secs / 0.007 secs) I looked around for other similar problems, but I couldn’t find a clear solution.
Thank you!
Issue Analytics
- State:
- Created 6 years ago
- Reactions:6
- Comments:7
Top Results From Across the Web
Vue3 Testing Library - vue-i18n not loading text
I am using the next version of @vue/test-utils and vue-jest ("@vue/test-utils": "^2.0.0-rc.16" + "vue-jest": "^5.0.0-alpha.10"). I created a ...
Read more >Mocking global objects - Vue Testing Handbook
vue-test-utils provides a simple way to mock global objects attached to Vue.prototype , both on test by test basis and to set a...
Read more >Vue.js Test from dust to light. Yeah | by Di.rk
I have some experience in unit testing in Angular and so I was not very sure if this gets also as complicated. But...
Read more >Vue.js Testing Made it Easy (with Testing Library)
It's not an easy job since Vuex is based on mutations. Without these lines, you may have problems where test #3 depends on...
Read more >Mocking Vue.js global objects in vue-test-utils
This is because we did not install vue-i18n , so the global $t method does not exist. Let's mock it using the mocks...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
You need to inject an i18n object when instantiating your component.
Using your example :
Now it creates a new VueI18n object and pass it to
new Constructor.@vsambor hello! we are testing components without Vue.extends(). Can you explain why this test doesn’t work please
As you can see we use mount(component, options) syntax. And get the same error