Closed jamesh-purr closed 2 years ago
I think you'll have to do at least 2 things to get this working:
route
function is being included/mixed in correctly. In your example above you're passing Ziggy's route()
function to the component as if it's a Vue mixin, but it's not. You could either do mixins: { route: route }
or import and use the Vue plugin that Ziggy provides.ziggy.js
file somewhere, import it and pass it in when you're setting up the mixin or plugin. If you're just using the @routes
Blade directive, you will have to use the php artisan ziggy:generate
command to generate a file containing all your routes and configuration, import that in your tests too, and pass it to Ziggy. If you don't want to keep this file up to date you could build your own stub config object inside your tests.Let me know if that works, and if it doesn't please include the entire output of any error messages or logs you see so that we can help debug.
@bakerkretzmar The mixin is mixins: { methods: { route } }
but then you need to declare a global with your routes list
Why not just use localVue
and install the vue plugin on localVue
But in any case you'll need to use the php artisan ziggy:generate
command if you want to use your routes in jest
import SidebarNavigation from '../../../resources/js/Components/SidebarNavigation/SidebarNavigation.vue';
import sidebarNavigationLinks from '../../../resources/js/Helpers/SidebarNavigationLinks';
import { createLocalVue, mount } from '@vue/test-utils';
import {ZiggyVue} from '../../../vendor/tightenco/ziggy/dist/vue';
import routes from '../../../resources/js/ziggy.js';
const localVue = createLocalVue()
localVue.use(ZiggyVue, routes)
describe('SidebarNavigation.vue', () => {
const wrapper = mount(SidebarNavigation, { localVue ))
test('links are mounting', async () => {
await wrapper.setData({ sidebarNavigationLinks })
})
});
This is a pretty basic way to setup your test environnement with plugins and doesn't have much to do with ziggy
You should use the same in your app setup which is in the documentation in the vue
section
Hey
I really appreciate you trying to help. I am not sure where I am going wrong. This is my first time using jest with vue and I am having a nightmare with this.
import SidebarNavigation from '../../../resources/js/Components/SidebarNavigation/SidebarNavigation.vue';
import sidebarNavigationLinks from '../../../resources/js/Helpers/SidebarNavigationLinks';
import { mount } from '@vue/test-utils';
import route from '../../../vendor/tightenco/ziggy/dist/index';
import {Ziggy} from '../../../resources/js/ziggy'
describe('SidebarNavigation.vue', () => {
const wrapper = mount(SidebarNavigation, {
global: {
plugin: [[route, Ziggy]]
}
})
test('links are mounting', async () => {
await wrapper.setData({ sidebarNavigationLinks })
})
});
I have tried what you suggested by using it via plugin and passing the routes in and I still get the same error that route is not defined. I also tried using dist/vue and ZiggyVue as the plugin and the error is the same.
TypeError: _ctx.route is not a function
78 |
79 | <script>
> 80 | import { Link } from '@inertiajs/inertia-vue3';
| ^
81 | import sidebarNavigationLinks from '../../Helpers/SidebarNavigationLinks';
82 |
83 | export default {
Any more help would be greatly appreciated.
@bakerkretzmar The mixin is
mixins: { methods: { route } }
but then you need to declare a global with your routes listWhy not just use
localVue
and install the vue plugin onlocalVue
But in any case you'll need to use the
php artisan ziggy:generate
command if you want to use your routes in jestimport SidebarNavigation from '../../../resources/js/Components/SidebarNavigation/SidebarNavigation.vue'; import sidebarNavigationLinks from '../../../resources/js/Helpers/SidebarNavigationLinks'; import { createLocalVue, mount } from '@vue/test-utils'; import {ZiggyVue} from '../../../vendor/tightenco/ziggy/dist/vue'; import routes from '../../../resources/js/ziggy.js'; const localVue = createLocalVue() localVue.use(ZiggyVue, routes) describe('SidebarNavigation.vue', () => { const wrapper = mount(SidebarNavigation, { localVue )) test('links are mounting', async () => { await wrapper.setData({ sidebarNavigationLinks }) }) });
This is a pretty basic way to setup your test environnement with plugins and doesn't have much to do with ziggy
You should use the same in your app setup which is in the documentation in the
vue
section
Thanks for trying to help out :) Vue 3 doesn't use local vue app in the test utils.
@jamesh-purr Indeed but you didn't say which version you were using 😉
Your code Is the correct way to install the plugin in vue3 tests, except you are missing an s
in plugin
const wrapper = mount(SidebarNavigation, {
global: {
plugins: [[route, Ziggy]]
}
})
@jamesh-purr Indeed but you didn't say which version you were using 😉
Your code Is the correct way to install the plugin in vue3 tests, except you are missing an
s
inplugin
const wrapper = mount(SidebarNavigation, { global: { plugins: [[route, Ziggy]] } })
Thanks for helping out :) and good catch with the typo. That did help however I did need to make a change to my code. This is the final test that got jest working correctly with the route help :)
import SidebarNavigation from '../../../resources/js/Components/SidebarNavigation/SidebarNavigation.vue';
import sidebarNavigationLinks from '../../../resources/js/Helpers/SidebarNavigationLinks';
import { mount } from '@vue/test-utils';
import { ZiggyVue } from 'ziggy-js/dist/vue'
import {Ziggy} from '../../../resources/js/ziggy'
describe('SidebarNavigation.vue', () => {
const wrapper = mount(SidebarNavigation, {
global: {
plugins: [[ZiggyVue, Ziggy]]
}
})
test('links are mounting', async () => {
await wrapper.setData({ sidebarNavigationLinks })
})
});
@Tofandel @bakerkretzmar thank you for taking your time to help out with this 👍
Ziggy version
1.3.1
Laravel version
8.65
Description
I don't seem to be able to get the route helper to work in any with jest. I have tried numerous and various ways of trying to achieve the route helper to work but have been unsuccessful
I have tried using this as a "guide" on how to get the rout help in jest but just doesn't work. https://github.com/tighten/ziggy/issues/264
I have tried using global mixins in jest - https://test-utils.vuejs.org/api/#global . To which again I haven't been able to resolve the error(below)
TypeError: _ctx.route is not a function
If you could maybe guide me to something that explains how to achieve the route helper in the jest tests?
This is just one example I have tried but with no luck. I have undone and redone the code so many times that I don't have any more examples I have tried.
I would greatly appreciate the help if you could please? I am using laravel breeze with inertia.
Ziggy call and context
Ziggy configuration
Route definition