I am trying to test a vue 2 component. I'm using vue test utils
I noticed that the coverage stops at a dispatch call like below. For example I'm triggering a click in the test and checking the coverage. I see that the function is being covered but the coverage stops at a call like below
await this.$store.dispatch("module/action")
I even tried adding a flush promises in the test after click of the button. But it still is not covering the code after any call where I await for a vuex dispatch.
Related
I have a question. Inside Nuxt's fetch hook I have some asynchronous calls that are performed by Nuxt content API.
Some pieces of this data are then used inside mounted hook.
But while Nuxt handles first request inside fetch, the control flow passes to the mounted hook and hence there's no needed data.
Yes, I tried uses something like if (!this.$fetchState.pending) return; but obviously mounted is called only once. Does anybody knows how can I force Nuxt to wait? Btw, the app is using static site generation and the component has property fetchOnServer set to false.
I'm currently exploring unit testing and Vue test utils particularly. I have an external library (vue-toastification) that shows a toast message when something occurs. I'd like to test that this toast has been shown, if an Error was thrown. But the problem is that the toast is rendered outside component's scope (in App.vue, as far as I can see), meanwhile with .get method we can only retrieve child components of a wrapper. So, how can I access this toast component without mounting the whole application? Maybe I should somehow use <teleport>?
I am trying to run my code only once in life cycle. right now i have put my code in useEffects and put a condition on to it but i want to ask is there any way we can write code that runs only once in a lifecycle of component
use [] to run one time
useEffect(()=>{
// Your code
},[])
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 trying to test a component where componentWillReceiveProps is calling Animated.parallel. I am unaware as to how go about testing the execution of this function using jest.
I have tried using spyOn, using the prototype