https://github.com/ehsan-shv/nuxt-jest
Nuxt-Jest common warnings.
https://github.com/ehsan-shv/nuxt-jest
jest nuxtjs vuejs vuelidate vuex
Last synced: 6 months ago
JSON representation
Nuxt-Jest common warnings.
- Host: GitHub
- URL: https://github.com/ehsan-shv/nuxt-jest
- Owner: ehsan-shv
- Created: 2021-07-06T17:06:12.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-07-07T15:23:01.000Z (about 4 years ago)
- Last Synced: 2025-03-22T19:01:46.200Z (7 months ago)
- Topics: jest, nuxtjs, vuejs, vuelidate, vuex
- Language: JavaScript
- Homepage:
- Size: 191 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## nuxt-jest common warnings:
```bash
# install dependencies
$ npm install
# serve with hot reload at localhost:3000
$ npm run dev
# run test
$ npm run test
```
---
**1-[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.**
component:
Home
test:
import { mount } from '@vue/test-utils'
import Header from '~/components/Header/Header'
describe('Header', () => {
test('is a Vue instance', () => {
const wrapper = mount(Header)
expect(wrapper.vm).toBeTruthy()
})})
solution:
import { mount, RouterLinkStub } from '@vue/test-utils'
import Header from '~/components/Header/Header'
describe('Header', () => {
test('is a Vue instance', () => {
const wrapper = mount(Header, {
stubs: {
NuxtLink: RouterLinkStub
}
}) expect(wrapper.vm).toBeTruthy()
})})
**2-[Vue warn]: Error in render: "TypeError: Cannot read property 'state' of undefined"**
component:
{{ $store.state.title }}
test:
import { mount } from '@vue/test-utils'
import Main from '~/components/Main/Main'
describe('Main', () => {
test('is a Vue instance', () => {
const wrapper = mount(Main)
expect(wrapper.vm).toBeTruthy()
})})
solution:
import { mount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import Main from '~/components/Main/Main'
const localVue = createLocalVue()
localVue.use(Vuex)
const store = new Vuex.Store({
state: {
title: 'nuxt-jest'
}
})
describe('Main', () => {
test('is a Vue instance', () => {
const wrapper = mount(Main, {
localVue,
store
})
expect(wrapper.vm).toBeTruthy()
})})
**3-[Vue warn]: Missing required prop: "title"**
component:
{{ title }}
export default {
name: 'Footer',
props: {
title: {
type: String,
required: true
}
}}
test:
import { mount } from '@vue/test-utils'
import Footer from '~/components/Footer/Footer'
describe('Footer', () => {
test('is a Vue instance', () => {
const wrapper = mount(Footer)
expect(wrapper.vm).toBeTruthy()
})})
solution:
import { mount } from '@vue/test-utils'
import Footer from '~/components/Footer/Footer'
describe('Footer', () => {
test('is a Vue instance', () => {
const wrapper = mount(Footer, {
propsData: { title: 'footer' }
}) expect(wrapper.vm).toBeTruthy()
})})
**4- [Vue warn]: Error in render: "TypeError: Cannot read property '[property name]' of undefined". ([Vuelidate](https://vuelidate.js.org/))**
component:
import { required } from 'vuelidate/lib/validators'
export default {
name: 'Side',
data () {
return {
name: ''
}
}, validations: {
name: {
required
}
}}
test:
import { mount, createLocalVue } from '@vue/test-utils'
import Side from '@/components/Side/Side'
describe('Side', () => {
test('is a Vue instance', () => {
const wrapper = mount(Side)
expect(wrapper.vm).toBeTruthy()
})})
solution:
import { mount, createLocalVue } from '@vue/test-utils'
import Side from '@/components/Side/Side'
import Vuelidate from 'vuelidate'
const localVue = createLocalVue()
localVue.use(Vuelidate)
describe('Side', () => {
test('is a Vue instance', () => {
const wrapper = mount(Side, {
localVue
})
expect(wrapper.vm).toBeTruthy()
})})