Invalid Chai property in Vitest

Question

I have this Vitest test:

    import React from 'react';
    import { expect, it, vi } from 'vitest';
    import { render, screen } from '@testing-library/react';
    import { StyledNativeTimePicker } from 
       '../timePicker/StyledNativeTimePicker.jsx';

    ...

    it('Shows the time correctly', async () => {
    const time = '12:00';
    render(
        <StyledNativeTimePicker
            time={time}
            timeChanged={() => {}}
        ></StyledNativeTimePicker>
    );
    const testInput = screen.getByRole('input', { type: 'time' });
    expect(testInput).toHaveValue(time);
   });
   ...

Now I get this error Error: Invalid Chai property: toHaveValue. Any Idea why when Chai is not installed?

Chai is installed, by Vitest. "Vitest provides chai assertions by default and also Jest compatible assertions build on top of chai" - neither includes toHaveValue, perhaps you intended to use Jest-DOM. — jonrsharpe
– jonrsharpe, Commented Dec 6, 2023 at 9:53

Vlad · Accepted Answer · 2023-12-14 21:48:58Z

26

First you need to create setupTests.js file, then connect it to the config. You may have to install jsdom as a dependency to the project.

setupTests.js

import '@testing-library/jest-dom';

vite.config.js

import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./setupTests.js"],
  },
});

links: Github problem and Configuring Vitest

answered Dec 14, 2023 at 21:48

Vlad

6351 gold badge5 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Funghi Jan 2 at 12:37

works for me, thank you!

Mark Swardstrom · Accepted Answer · 2024-02-26 23:43:50Z

13

It may be installed as a dependency of vitest

Try adding

import '@testing-library/jest-dom/vitest';

answered Feb 26, 2024 at 23:43

Mark Swardstrom

18.3k6 gold badges74 silver badges75 bronze badges

Comments

benny254 · Accepted Answer · 2024-03-07 21:31:27Z

3

I just installed this

npm i vite-tsconfig-paths

and added to my vitest config : vitest.config.ts

import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [tsconfigPaths()],
})

import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [tsconfigPaths()],
})

answered Mar 7, 2024 at 21:31

benny254

663 bronze badges

Comments

nicolello.dev · Accepted Answer · 2025-05-14 14:08:02Z

1

I was getting the error PrettyFormatPluginError: Invalid Chai property: $$typeof, and in my case it was due to a "naked" assertion:

expect(fn).toHaveBeenCalledTimes(1);
expect(fn) // <-- missing something afterwards
...

It's an old project, they may have changed the error message to a more meaningful one

answered May 14 at 14:08

nicolello.dev

681 silver badge10 bronze badges

1 Comment

Ben Richter Sep 15 at 11:39

That could be a potential issue that is hard to find. I've searched my codebase with a Regex like: expect(([^()]|([^()]*))*)(?!\.) It finds every expect without a following Dot.

MoralCode · Accepted Answer · 2025-08-17 17:03:43Z

0

I had this issue due to syntax errors in my tests.

In my case I deleted a value for a variable in my tests but not the var variable = part (had assumed i was copying but instead performed a cut) prior to the expect() calls at the end of the test, so one of the expect calls was getting assigned to that variable, which was then being passed into another expect() call.

answered Aug 17 at 17:03

MoralCode

2,1121 gold badge23 silver badges46 bronze badges

Collectives™ on Stack Overflow

Invalid Chai property in Vitest

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related