919 questions
1
vote
1
answer
946
views
Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0. at run vitest
vitest.config.js:
import { defineConfig, mergeConfig } from 'vitest/config'
import viteConfig from './vite.config'
export default mergeConfig(
viteConfig,
defineConfig({
test: {
...
0
votes
1
answer
1k
views
Vitest "coverage enabled but missing html reporter"
I'm using Vitest in my project and I'm trying to obtain a coverage report from the Vitest UI. I've followed the steps from the docs, but I'm getting the error "Coverage enabled but missing html ...
- 4,945
1
vote
1
answer
635
views
How can I write a test for selecting an item from a Select component that uses Portal?
I am writing a test for a Select component using the shadcn/ui package. This component has some parts (such as selectable items) that are rendered inside a Portal. Because of this, I’m having trouble ...
- 75
3
votes
2
answers
6k
views
Vitest - Unknown file extension ".css"
With React project set up with Vite and run tests with Vitest v2.1.1, we might see the following issue with CSS files:
TypeError: Unknown file extension .css for /path/to/css/file
How can we resolve ...
- 515
0
votes
1
answer
2k
views
How to test useEffect with vitest
i'm building a portfolio website, so i'm mocking some requests to show that i know how to handle it.
Here's my "request":
export const getTestimonials = async (): Promise<Testimonial[]>...
- 11
0
votes
1
answer
789
views
Cannot find module /vitest/dist/chunks from /vitest/dist/worker.js when migrate to yarn v4 and to vitest
I use yarn workspases and one of workspaces threw this error:
file:///home/username/Projects/projectName/node_modules/tinypool/dist/chunk-E2J7JLFN.js:46
throw error;
^
Error [...
- 1,265
1
vote
1
answer
465
views
How to spy on useAppDispatch() hook instance using redux-toolkit vitest
Since we can not use the hook useAppDispatch() within our test file, I wonder how can I spy on the returned instance.
import * as redux from "@/core/context/redux/store";
...
it("test&...
- 471
0
votes
1
answer
624
views
Mocking graphql-request with vitest
I have been trying to mock my graphql-request with vitest. The request looks this way:
const getTastyFruit = gql`
query Fruit($id: String!) {
fruit(id: $id) {
shop {
...
- 1,381
1
vote
0
answers
285
views
React query mocking requests with vitest
I have a React component that uses a simple hook from React Query. I'm creating unit tests with Vitest, and I need to verify if the component is being rendered with the correct information based on ...
- 1,169
0
votes
1
answer
363
views
Type error in TypeScript 5.6: Type '() => Generator<string, void, any>' is not assignable to type '() => BuiltinIterator<string, undefined, any>'
For my unit tests I create a fake window.location object. Here's the slightly simplified code:
function getFakeLocation(getCurrentUrl: () => URL): Location {
return {
get ancestorOrigins(): ...
- 3,916
2
votes
0
answers
141
views
useState not updating on test using vitest for react
As I was setting up my tests for the code, I got stuck that I can't fully understand.
My vitest log asks me to put my button click inside an act(), but it breaks by doing so. I don't fully understand ...
0
votes
0
answers
2k
views
Vitest unable to find element with role='button' and aria-label despite it appearing in the DOM debug
I'm encountering an issue with Vitest where it cannot find an element with role="button" and aria-label matching /open notifications/i, even though the element appears clearly in the debug ...
1
vote
1
answer
504
views
How does one get new URL() (for a web worker) that Vitest can recognise in a React integration test?
I instantiate a new web worker within one of my React components
const MyComponent = () => {
...
const worker = new Worker(
new URL('../../../path/to/my-worker.ts', import.meta.url)
...
- 2,312
0
votes
1
answer
527
views
VITEST Hook mocked on test dont return desired value
I have three files:
use-user-info.ts
user-info.tsx
user-info.test.tsx
I want to test the behaviour of the component UserInfo (exported from user-info.tsx).
On my test file I mock the hook like this:
...
1
vote
1
answer
4k
views
Updating Vite to its latest version in package.json is not updating its dependencies in package-lock.json
In package.json, I have upgraded Vite to its latest version - 5.4.0.
But package-lock.json is still showing dependencies with its old version -
esbuild latest version in npm registry is 0.23.0 but ...
- 131
1
vote
1
answer
354
views
Is it possible to read file data for use in Vitest tests of Cloudflare Workers?
I have a Cloudflare Worker that interacts with an R2 bucket containing several data files. I want to write tests for this, but since Vitest isolates the tests from the development bucket, I need to be ...
3
votes
0
answers
2k
views
Vue: Cannot find module ~~~ or its corresponding type declarations. in Vitest test module
I'm using vite and vitest.
vite.config.ts
export default defineConfig({
plugins: [vue(), VueDevTools()],
resolve: {
alias: [
{
find: '@',
replacement: fileURLToPath(new ...
- 31
1
vote
1
answer
369
views
How to spy on Vue composable inner function that is called inside another function inside composable?
The project is using Vue, Vitest and Vue Test Utils. I am new to UI unit testing and I need to test that when one function from composable is called, then the other function should have been called.
...
6
votes
2
answers
1k
views
@mui/icons-material + Vitest ES Module Issue
I'm migrating our test suite from Jest to Vitest. All tests work except for a remaining few which result in this error:
Module /home/d/code/frontend/node_modules/@mui/icons-material/esm/VisibilityOff....
- 7,595
0
votes
1
answer
206
views
Mock not being called in React Vitest App test
I have this React component:
import React, { useState, useEffect } from "react";
import { BrowserRouter } from "react-router-dom";
import "./App.css";
import Home from &...
1
vote
1
answer
590
views
Vue 3 and Vitest focus input sets document.activeElement to HTMLBodyElement in test in composition API
Given a Vue 3 component
<template>
<input id="input" type="text" @focus="handleOnFocus($event)" />
</template>
<script setup type="ts">...
- 2,798
0
votes
1
answer
53
views
How to test components dependent on utils/functions?
Im new to testing in React using vitest. Im trying to test component that not only displays data but also manipulate them using some type of util.
This is very simple example with ReservationCard that ...
- 149
0
votes
2
answers
368
views
renderHook not rendering items called from API
I have a custom hook (useFetch), which I'm using inside a page to pass data into a <Products/> component.
export default function App() {
const { products, totalProducts, currentPage, ...
1
vote
1
answer
817
views
How test a file drag-and-drop using Vitest?
I'm trying to test a drag-and-drop of a file into a Vue component and right now I'm using Vitest but all the resources on drag-and-drop I found were only for using Jest to achieve that so:
How to test ...
- 5,944
0
votes
1
answer
1k
views
How do I expose a library to the global window in Vitest?
So we are in the middle of adding Vitest to an existing project that currently relies on Webpack for bundling our code. We are in the process of rewriting older jQuery code into React.
Right now i'm ...
- 858