56 questions
16
votes
2
answers
17k
views
Using Vue Test Utils, how can I check if a button is disabled?
I'm testing a Vue component but I'm having trouble testing a button's disabled state. How can I access a button's disabled status in my tests?
I've tried using .attributes() but in this instance the ...
- 1,089
7
votes
2
answers
3k
views
vue3 testing library - How to use globalProperties in tests
I am new to Vue and followed the recommendation to use vue testing library. The only issue is I can't seem to find a way to inject my code into globalProperties in render function.
Does anyone know of ...
- 93
5
votes
1
answer
7k
views
Unit Testing Vue 3 Component that uses Pinia with Vue Testing Library
I am struggling to understand how I can test the rendering of items based on the results of a call to a Pina getter in my Vue 3 app (using the Vue Testing Library). An example of what I want to ...
- 642
4
votes
1
answer
763
views
VeeValidate4. How to test custom field Component which uses useField?
I tried to test my custom input component. But I don't know how to do it right, because I didn't find any info how to test it.
The only thing I found was from this Mocking Form and Field Contexts
My ...
- 71
3
votes
1
answer
5k
views
Testing with vitest and testing-library is not working: it is due to using the SFC Script Setup?
I'm new to Vue and especially with the composition functions. I'm trying to test a component that uses the script setup; however, it seems that it is not working.
The component is this one:
<...
- 179
2
votes
1
answer
3k
views
Testing vue watchers with vue-testing-library
Anyone know how I would test a watcher in a component with vue-testing-library?
Here is my component. I want to test that the method is called when the brand vuex state is updated. With vue test utils ...
- 21
2
votes
1
answer
3k
views
Vue Testing Library, Child Component receives props
I'm trying to implement some Testing Library tests on a Vuejs app, but I can't figure out how to pass props to a component within the test.
For example, I want a unit test for a component that appears ...
- 590
2
votes
4
answers
479
views
Is there a way to turn off syntax highlighting in testing-library
I am using @testing-library/vue and run the tests within a build step of Sublime Text. The error output uses prettyDom and isn't very legible in the output window:
Example Output in Build Results ...
- 147
2
votes
0
answers
262
views
Vue test can't find store in child components
I have a parent component and there are several child components. Some children use Vuex store. When I try to mount parent component like below in Vue test, I'm getting an error "Cannot read ...
- 1,759
1
vote
4
answers
8k
views
SyntaxError: Cannot use import statement outside a module { AXIOS }
Hello I changed my code from fetch to axios and when I run my tests I get this problem... Can anyone help me with that ?
SyntaxError: Cannot use import statement outside a module
> 1 | import ...
- 13
1
vote
1
answer
1k
views
When using testing-library with Vue, what is the best way to confirm an element is hidden by v-show?
When using testing-library with Vue it is easy to check if an element is not present in the DOM.
For example when v-if for the element is false:
element = screen.queryByTestId("my-element")
...
- 11.5k
1
vote
2
answers
2k
views
Vue Testing Library won't rerender DOM when state changes
I have a component with a strait forward Edit button. The Edit button calls a method that sets isEditing to true.
There are a few input elements with v-if="isEditing", so I'm testing that ...
- 590
1
vote
1
answer
602
views
Vue Apollo TypeScript: ApolloClient is missing websocket properties
I'm trying to set up a component test with Vue Testing Library and Apollo as described in their example.
import { ApolloClient, InMemoryCache } from '@apollo/client'
import { render } from '@testing-...
- 15k
1
vote
0
answers
499
views
Using Quasar plugins with vitest in vue 3 (compat) breaks tests
I have a Vue 3 project created with Vite and using @vue/compat. I recently added Quasar using the Vite Plugin. For my tests, I use Vitest and Vue Testing Library.
Everything works as intended, except ...
- 11
1
vote
0
answers
459
views
Vue Test Utils - It doesn't mount the component for the test and it still returns "Cannot read properties of undefined " in the terminal
After implementing the searchBar logic, my tests stopped working (even those that don't depend on this searchBar component), I tried to mount the Header component with shallowMount, but it doesn't ...
- 11
1
vote
1
answer
787
views
ESLint reports "screen not found in @testing-library/vue"
I'm trying to use @testing-library/vue and import the screen method and ESLint reports the following error: "screen not found in @testing-library/vue".
// The render function doesn't error ...
- 1,466
1
vote
1
answer
2k
views
@testing-library/vue :: testing emit an event on VueJS component using debounce
I'm trying to test an emitted event by an input field, which has a debounce on update method.
Without debounce, the test passed, without problems.
Here's a piece of the code.
import { render } from '@...
- 1,054
0
votes
1
answer
2k
views
Cannot mount TipTap content in Vitest unit test
I have a vue component that contains a TipTap editor, which I am having problems testing. I am using Vitest with vue-test-utils.
This is my component:
<script setup lang="ts">
import { ...
- 860
0
votes
1
answer
452
views
mock store getters inside Global Guard does not work
I created a global guard that uses getters from store.
I am trying to mock some getters from store for testing purpose. The problem is that mocking
does not work.
// router/index.ts
export function ...
- 1,051
0
votes
1
answer
1k
views
Test vue3 components with vue-test-library and global components
I start to create unit tests for production app with use jest and @testing-library/vue and support libs. I make first test:
import vue from "vue";
import { render } from "@testing-...
- 36
0
votes
1
answer
4k
views
Can't test the input checkbox properly when the element is disabled using @testing-library/vue
I'm trying to create some tests for a checkbox component but looks like I can't make an assertion for an input[type="checkbox"] when is disabled.
In the first two blocks I'm testing if the ...
- 1,054
0
votes
0
answers
52
views
Testing Bootstrap accordion in Vue component with Nuxt test utils failing
I recently upgraded my project from Vue 2 to Vue 3, so i'm just importing Bootstrap instead of using Bootstrap-Vue.
I want to test the accordion functionality using nuxt-test-utils and my test ...
- 3,039
0
votes
1
answer
59
views
Vue Test Utils on async component always returning empty/undefined
I am updating my project from Vue 2/Nuxt 2 to Vue 3/Nuxt 3. As i've been doing this my tests have broken and i'm trying to resolve them but every way I try to shallowMount my component returns an ...
- 3,039
0
votes
1
answer
1k
views
Unit testing vue 3 onErrorCapture life cycle hook
import { onErrorCaptured } from "vue";
import { TheLayout } from "@/components";
const snackbar = useSnackbar();
onErrorCaptured((err) => {
console.error(err);
snackbar....
- 106
0
votes
0
answers
207
views
How to mock Vaadin components with Jest/Vitest in a Vue project
I'm currently working in a Vue+javascript project that uses Vaadin components.
I'm trying to test our code using vitest + vue testing library, but I'm having problems mocking the third party ...
- 1