Search code examples
reactjswebstormreact-testing-libraryvitestjest-dom

"Unresolved function or method toHaveValue()" and "Argument types do not match parameters" warnings | WebStorm

I am writing tests for React component with @testing-library/react and vitest. Here is my code:

Here is my code

It works fine, but for some reason I get these annoying warnings:

enter image description here

When I rewrite code to this:
enter image description here

then the test fails:
enter image description here

This problem also occurs with other components (although the test doesn't fail):
enter image description here

My imports look like this:
enter image description here

I would like to understand why this is happening and how to fix it. I saw a similar question asked here before, but the solutions recommended there didn't help me.

App.test.jsx

import {screen} from "@testing-library/react";
import {describe, expect} from "vitest";
import App from "@components/App/App";
import {renderWithProviders} from "@utils/utils-for-tests/renderWithProwiders";

describe('App', () => {
    it('Renders App', () => {
        renderWithProviders(<App />);
        expect(screen.getByRole('banner')).toBeInTheDocument()
        expect(screen.getByRole('main').toBeInTheDocument)
        expect(screen.getByRole('contentinfo').toBeInTheDocument)
    });
});;

Header.test.jsx

import {describe, expect} from "vitest";
import {renderWithProviders} from "@utils/utils-for-tests/renderWithProwiders";
import Header from "@components/Header/Header";
import {MemoryRouter} from "react-router-dom";
import {waitFor,screen} from "@testing-library/react";
import userEvent from "@testing-library/user-event";

describe('Header', () => {
    it('check search', async ()=>{
        renderWithProviders(<MemoryRouter><Header/></MemoryRouter>)
        const input = screen.getByPlaceholderText(/Search here.../i)
        await userEvent.type(input, "Test");
        await waitFor(()=>{
            expect(input).toHaveValue("Test")
        })
        await userEvent.click(screen.getByRole('button',{name: /search-submit/i}));//should reset input field
        await waitFor(()=>{
            expect(input).not.toHaveValue("Test")
        })
    })
    
});

setup.js for vitest

import { expect, afterEach } from 'vitest';
import { cleanup } from '@testing-library/react';
import matchers from '@testing-library/jest-dom/matchers';

// extends Vitest's expect method with methods from react-testing-library
expect.extend(matchers);

// runs a cleanup after each test case (e.g. clearing jsdom)
afterEach(() => {
    cleanup();
});

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import eslint from 'vite-plugin-eslint'
const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  resolve:{
    alias:{
      '@' : path.resolve(__dirname, './src'),
      '@components' : path.resolve(__dirname, './src/components'),
      '@pages' : path.resolve(__dirname, './src/pages'),
      '@assets' : path.resolve(__dirname, './src/assets'),
      '@hooks' : path.resolve(__dirname, './src/hooks'),
      '@store' : path.resolve(__dirname, './src/store'),
      '@slices' : path.resolve(__dirname, './src/store/slices'),
      '@fonts' : path.resolve(__dirname, './src/assets/fonts'),
      '@utils' : path.resolve(__dirname, './utils'),
    },
  },
  plugins: [react(),eslint()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './tests/setup.js',
    coverage: {
      reporter: ['text', 'json', 'html'],
    }
  },
})

package.json

{
  "name": "e-commerce",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite --open",
    "build": "vite build",
    "test": "vitest --ui",
    "coverage": "vitest run --coverage",
    "preview": "vite preview"
  },
  "eslintConfig": {
    "extends": [
      "plugin:react-hooks/recommended",
      "react-app"
    ],
    "parserOptions": {
      "sourceType": "module",
      "ecmaVersion": 2020,
      "ecmaFeatures": {
        "jsx": true
      }
    }
  },
  "dependencies": {
    "@reduxjs/toolkit": "^1.9.1",
    "firebase": "^9.15.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.41.3",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.6.1",
    "redux": "^4.2.0",
    "sass": "^1.57.1"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "@vitejs/plugin-react-swc": "^3.0.0",
    "@vitest/ui": "^0.26.3",
    "classnames": "^2.3.2",
    "eslint": "^8.31.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "jsdom": "^21.0.0",
    "vite": "^4.0.0",
    "vite-plugin-eslint": "^1.8.1",
    "vitest": "^0.26.3"
  }
}
Solution

  • I found the solution. I don't need to import {describe, expect} from 'vitest'