I have a componentized form where I have a different ref for each component and I need to validate these refs once the component is created. The problem is that during the created the refs are undefined and in the mounted the validation is giving an incorrect result for some refs.
testing exactly the same validation after mounting, gives the expected result
Related
Problem desription
I am trying to access Vue child components passed in a slot.
I do it with the following approach:
this.$slots.default()
I receive the components and I can even access and call methods of a component using the following approach:
this.$slots.default()[1].type.methods.methodName
The problem is that within the child component this keyword has now changed to another type where you can only access methods defined in that component and restricted variables. And so for example you can't access this.$refs (which I actually need) or this.$el or anything else except defined methods and some variables.
What I've tried
I've tried assigning this.$refs to a variable within the onmount function and then trying to access it when calling a method from the parent component, but you can't access that variable.
In Vue2 you have full access to the child component and this would work.
Is there a way to fix it in Vue3?
Context
i have a User object which is the data model for a vue.js UserComponent. When the component is mounted the user has undefined fields. Then inside the mounted() method the user is fetched from the server and all its fileds are setted.
Problem
So i found that vue-test-utils doesn't redraw component when user's fields changed.
Note
On the other hand the same test works good if i change object prop to scalar.
I tried to reset user prop by wrapper.setProp({user: user}) after its fields was fetchad. Unfortunatelly it is impossible as vue-test-utils preventing to set the same object to prop.
Demo repo (cloned from official vue-test-utils-getting-started)
https://github.com/alexey2baranov/vue-test-utils-getting-started
When your component have async methods, like fetch user fields on mounted, you have two options when testing:
Option 1: Test with an async function and await for the nextTick
Option 2: Use the package flush-promises
Both options are detailed in the vuejs test utils documentation with examples.
Also, you can mock axios response with some data for populate your user fields without a real fetch to your backend.
I have a pair of components as follows:
ParentComponent
-- ChildComponent
where child is rendered within parent. There are no console errors on the front end.
However, a simple jest test:
it("renders child form", () => {
expect(wrapper.contains(Child)).toBe(true);
});
fails and gives the warning:
Unknown custom element: <Child> - did you register the component correctly?
Tests on the child individually pass, and the parent/child have rely similar stores and getters so the test setup is identical.
Why does this happen? Is there a way I can better debug the process the test is taking to see why the child is not appearing in the parent?
At the top of the tests there is a beforeEach that shallowMounts the parent with the mock store. ShallowMount is not the issue as the test does not run with mount.
Found the answer - Vue didn't like the use of a router to do router.push("routeName"), and would only run with this.$router.push. Vue didn't give any useful warnings so trial and error was the only way to fix it!
I am using Inertiajs
with Laravel and also trying to use Element UI components but as i use Menu component i am having following error in console, I just used example as given in Element Ui Components as i was testing.
I see 2 different errors in there, both of them are with props.
I assume your component is taking the route as a prop, and you are also using the route as a method, which you might have put inside methods: {} which is not allowed. Make sure you rename your method route to something else.
Note: As a matter of fact you can't have any data coinciding with each other. your props, data, computed props and methods all should have unique names.
You are trying to use v-model on the props directly which won't work in Vue. if the prop is a primitive (Number, String, Boolean etc). but you can pass Object or an Array which can hold a reference to the data. This is because reactivity in Vue can't keep track of props when passed as primitives.
More on prop mutations here: https://v2.vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow
I'm encountering the following error message when testing a component mounted with Vue utils:
Avoid mutating a prop directly since the value will be overwritten
whenever the parent component re-renders.
Instead, use a data or computed property based on the prop's value. Prop being mutated: <prop name>
When mounting a component to be tested, to prevent the error message from being shown in the console, pass the sync option to false to the mount function. See also https://vue-test-utils.vuejs.org/api/options.html#sync