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?

Answer 1

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

Answer 2

It may be installed as a dependency of vitest

Try adding

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

Answer 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()],
})