V-wave causes vue-test-utils to fail mounting
See original GitHub issueProblem:
I’m trying to write a test with a component that uses v-wave directive, but when I try to mount it with shallowMount()
or mount()
the same error happens:
Test:
describe("Components: TemplateCard", () => {
beforeEach(() => {
jest.clearAllMocks();
});
it("should get correct icon class when the type is", () => {
const wrapper = shallowMount(TemplateCard, {
global: { stubs: ["router-link"], plugins: [VWave] },
props: {
template: mockedTemplate
}
});
console.log(wrapper.html());
});
it("should get template Models array", () => {
const wrapper = shallowMount(TemplateCard, {
global: { stubs: ["router-link"], plugins: [VWave] },
props: {
template: mockedTemplate
}
});
const modelsArray = wrapper.vm.content;
expect(modelsArray).toEqual(mockedTemplate.templateContentResponses);
});
});
Error:
I tried to add v-wave as a plugin, that makes the first test pass for some reason. Am I doing something wrong?
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (4 by maintainers)
Top Results From Across the Web
mount fails on second attempt · Issue #1359 · vuejs/vue-test-utils
I cannot be 100% sure if this issue is caused by Vuetify or the Test Utils. I have been trying alot of different...
Read more >vue.js - Vue Test Utils - Unable to correctly mount/shallow ...
The console.log with that weird input for wrapper or elements is normal behaviour. I ran couple tests with your components and everything ...
Read more >Testing Teleport - Vue Test Utils
Most tests written with Vue Test Utils are scoped to the component passed to mount , which introduces some complexity when it comes...
Read more >@vue/test-utils - npm
Start using @vue/test-utils in your project by running `npm i @vue/test-utils`. There are 270 other projects in the npm registry using ...
Read more >Things You Might Not Know About Vue-Test-Utils - WebDevEtc
Vue mounting options: use the parentComponent option to set the component to use as a parent. Vue has an excellent testing package called...
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’re probably right about it being a life cycle hook considering the next function in the stack is
invokeDirectiveHook
.I’ll likely be reworking a lot of the internals to address the aforementioned issue. I have a feeling that whatever I come up with will resolve this too.
Please try installing v-wave@beta (
npm i v-wave@beta
) and let me know if it resolves your issue. I’ve changed how v-wave detects a vue3 environment and it shouldn’t cause this problem anymore.