919 questions
155
votes
20
answers
85k
views
Vitest defineConfig, 'test' does not exist in type 'UserConfigExport'
Trying to setup vitest on an already existing vite (vue 3, typescript) project.
My vite.config.ts looks like this:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export ...
- 6,842
38
votes
11
answers
42k
views
How do I access my .env variables from a Vitest test?
I am trying to migrate my tests from Jest to Vitest. I have a test suite that uses the dotenv package to pull in my .env variables.
I have this in my test suite
beforeAll(async () => {
vi....
- 629
31
votes
2
answers
56k
views
How to write a unit test in vitest that expects an error
I want to mock an object method that throws an error but the test is always failing with these errors.
I can't post the image yet but please check the link. It shows the test failing.
throw new Error
...
- 323
26
votes
4
answers
33k
views
"describe is not defined" in Vitest
I'm starting out with Vite for a React application but unable to get jest tests working. I am trying to use Vitest with experimental ES module.
I am getting:
FAIL src/App.test.tsx [ src/App.test.tsx ]...
- 97.1k
22
votes
7
answers
27k
views
How to mock/stub vue-i18n?
I have started to replace Jest with Vitest for my unit test library in my Vue 3 App.
I am trying to write unit test for a component that uses the vue-i18n library to translate text within it but when ...
- 1,177
20
votes
1
answer
16k
views
ReferenceError: document is not defined - testing with vitest
I am woking on a Vite project using react framework.
I write some test cases for my app using vitest when I run the test I see the following error
FAIL tests/Reservations.test.jsx > Reservations ...
17
votes
4
answers
46k
views
Vitest mock modules function in only one test and use the actual function in others
The following is an abstraction of my problem and thus does not make too much sense:
Given I have a simple utility callMethodIf that's returning the return of another imported method (blackbox).
~~/...
- 869
16
votes
3
answers
14k
views
VS Code showing eslint error but vitest is working. 'vi' is not defined
I have the following tsconfig configuration:
{
"include": ["tests/**/*.ts"],
"exclude": [],
"compilerOptions": {
"composite": true,
&...
- 42.8k
15
votes
1
answer
35k
views
vitest global variables in setupfiles
How do I get variables defined in my setup files to work in my test files?
Setup files:
var lol = 'lol'
test:
describe("test", () => {
it("test lol", () => {
expect(...
- 55.4k
15
votes
0
answers
3k
views
Expect.extend throws at Vitest execution: TypeError: Cannot convert undefined or null to object [closed]
I am using Vitest, Vite and jest for my testing. I am trying to extend the built-in Vitest matchers with @testing-library/jest-dom/matchers. I setup Vitest using the examples in this article, and ...
- 149
13
votes
2
answers
15k
views
How to keep tests outside from source directory in Vite projects?
Running npm init vue@latest with the following setup
generates a Vitest spec file inside the src directory. I'm wondering why Cypress e2e tests have a seperate directory and Vitest unit tests are ...
user17298649
13
votes
1
answer
13k
views
How to get vitest working with require of ES module
Trying to migrate some old TypeScript code from CRA to Vite, and getting stuck on a problem with Vitest. The project has dependencies like this:
my-project (ESM)
depends on: lib1 (CJS)
depends ...
- 24k
12
votes
1
answer
11k
views
Use "as vi.Mock" for methods from a mocked element when using TypeScript
When I mock vue-router with Jest, and want to mock the return value of an internal method, TypeScript doesn't understand that the inner method has become a mock, and can be treated as such.
For ...
- 597
12
votes
5
answers
13k
views
Troubleshooting Vitest setup in vite.config.js with react-ts template
Adding 'jsdom' to vite.config.ts brings the following error:
No overload matches this call.
The last overload gave the following error.
Argument of type '{ plugins: PluginOption[][]; test: { ...
- 121
12
votes
2
answers
14k
views
Vitest config doesn't detect jsdom environment
I'm in a Vite/React/TypeScript application and I'm configuring my first test with Vitest.
When I run my Button test (yarn vitest), I get this error:
packages/frontend/src/components/Generic/Button/...
- 367
11
votes
1
answer
11k
views
What is the intended test structure of vitest inside Vue projects?
I created a new Vue project via npm init vue@latest ( with vitest ). Inside ./src/components is a __test__ directory containing a component unit test.
Is it intended to create another __test__ ...
user19025657
11
votes
1
answer
9k
views
How to do manual mocks in Vitest?
I'm basically trying to mock an external module in the same way for all my vitest tests, and it's surprisingly not trivial. In Jest, I would just create a __mocks__ folder at the root, and it appears ...
- 113
10
votes
5
answers
15k
views
Invalid Chai property in Vitest
I have this Vitest test:
import React from 'react';
import { expect, it, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import { StyledNativeTimePicker } ...
- 3,190
10
votes
1
answer
22k
views
How to set/mock an env variable in vitest (`process.env.NODE_ENV = 'anything'` takes effect only in test file)?
I have a method, in a class, that only executes its action when NODE_ENV === 'test'.
Here is the test that I set the env to anything to test the failing scenario:
it('returns Left on clearDatabase ...
- 394
10
votes
2
answers
5k
views
Is it possible to use different tsconfig file for vitest
Is there any way to use different tsconfig file for vitest?
I have a large project using vue-cli. Before converting it to vite based I first want to use vitest instead of jest. The problem is that the ...
- 42.8k
10
votes
1
answer
7k
views
How to debug vitest in Visual Studio code. Currently have "unbound" breakpoints
According to the Vitest documentation, this is supposed to allow debugging of Vitest in visual Studio code. So I have the following in launch.json:
{
"version": "0.2.0",
"...
- 857
9
votes
3
answers
16k
views
How type mocks with vitest?
I want to mock fs with vitest and I am successfully doing so, however I am using any to do so. Consider
import { promises as fs } from 'fs';
vi.mock('fs')
it('can mock', async () => {
// ...
- 4,846
9
votes
2
answers
9k
views
Test a component with Vitest using useNuxtApp with Nuxt 3
I want to test a component using the useNuxtApp composable.
This is the component(MyComponent.vue):
<template>
<div class="flex justify-between">
<span>{{ $fmt(12) }}&...
- 3,210
9
votes
3
answers
6k
views
Vitest setup auto-import for Nuxt and pinia
I'm trying to setup vitest + @vue/test-utils but I can't test some components that use ref(Vue) or useCookie (Nuxt), I have the same problem with Pinia as well where I import globally 2 functions in ...
- 697
9
votes
2
answers
3k
views
MSW - Error: No known conditions for "./browser" specifier in "msw" package
After doing successful MSW (Mock Service worker) setup for browser. Everything is working fine.
Here is my setup files ->
//handlers.ts
import { http, HttpResponse } from 'msw';
const handlers = [
...
- 1,925