I got a very simple test, but I'm unable to make it work, it constantly says that the route
method is not defined.
Here's my test and my last try.
import { createLocalVue, mount } from '@vue/test-utils'
import AdgemButton from '@/Components/Common/AdgemButton.vue';
import TableConfigurationModal from '@/Components/Modal/TableConfigurationModal.vue';
import { ZiggyVue } from 'ziggyvue';
import { Ziggy } from '../../../../resources/js/ziggy';
const localVue = createLocalVue()
localVue.use(ZiggyVue, Ziggy.routes)
test('adgem button is succesfully rendered with clasess', () => {
const wrapper = mount(TableConfigurationModal, {
localVue,
})
expect(wrapper.text()).toContain('Hello world')
})
Here's my jest.config.js
:
// jest.config.js
module.exports = {
"roots": [
"<rootDir>/tests/Vue"
],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
},
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/resources/js/$1",
"axios": "axios/dist/node/axios.cjs",
"^ziggyvue$": "<rootDir>/vendor/tightenco/ziggy/dist/vue",
},
"moduleFileExtensions": [ 'js', 'json', 'vue' ],
"setupFilesAfterEnv": [
"<rootDir>tests/Vue/setup.js"
],
"testEnvironment": "jsdom",
}
And here's the trace of the error:
ReferenceError: route is not defined
130 | this.selectedFields = res.data.selectedFields
131 | ? Object.keys(res.data.selectedFields).reduce((acc, key) => {
> 132 | acc[key] = { label: res.data.selectedFields[key], selected: false };
| ^
133 | return acc;
134 | }, {})
135 | : {};
at VueComponent.mounted (resources/js/Components/Modal/TableConfigurationModal.vue:132:23)
at invokeWithErrorHandling (node_modules/vue/dist/vue.runtime.common.dev.js:2919:61)
at callHook$1 (node_modules/vue/dist/vue.runtime.common.dev.js:3983:13)
at Object.insert (node_modules/vue/dist/vue.runtime.common.dev.js:4369:13)
at invokeInsertHook (node_modules/vue/dist/vue.runtime.common.dev.js:6864:36)
at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.runtime.common.dev.js:7073:9)
at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.dev.js:3718:25)
at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.dev.js:3828:16)
at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:3400:33)
at new Watcher (node_modules/vue/dist/vue.runtime.common.dev.js:3390:51)
at mountComponent (node_modules/vue/dist/vue.runtime.common.dev.js:3845:5)
at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.dev.js:8687:12)
at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:14067:21)
at Object.<anonymous> (tests/Vue/Components/Common/AdgemButton.test.js:11:26)
at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
at runJest (node_modules/@jest/core/build/runJest.js:404:19)
at _run10000 (node_modules/@jest/core/build/cli/index.js:320:7)
at runCLI (node_modules/@jest/core/build/cli/index.js:173:3)