reactjs - Žádná přetížení neodpovídá tomuto volání. Objektový literál může specifikovat pouze známé vlastnosti a 'test' neexistuje v typu 'UserConfigExport'

Snažím se nastavit vitest na svém projektu Vite/React/TS, a nefunguje to správně. Podíval jsem se na některá řešení, která jsem našel online, ale žádné nefungovalo.

Mým konečným cílem je, aby tento soubor fungoval:

import ErrorMessage from "./ErrorMessage";
import { render, screen } from "@testing-library/react";


it("should have hello world", () => {
  render(<ErrorMessage />);
  const message = screen.queryByText(/Hello World/i);

  expect(message).toBeVisible();
});

aktuálně to dává následující chybu:

Property 'toBeVisible' does not exist on type 'Assertion<HTMLElement | null>'.ts(2339)

Našel jsem online návod, který to funguje, ale když to zkusím, dostanu toto.

vite.config.ts

/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: "jsdom",
    css: true,
    setupFiles: "./src/tests/setup",
  },
});

abyste získali toBeVisible() ve svém testovacím souboru, musíte nastavit css na true, ale vlastnost test zde je ta, která způsobuje chybu, běžné řešení, které najdete online, je importovat defineConfig z "vitest/config", a i když je pravda, že to opraví výše uvedenou chybu, způsobí to jinou chybu pro vlastnost plugins, No overload matches this call. na [react()].

Dalším řešením, které jsem našel, bylo vytvořit dva soubory:

soubor vite.config.ts, který exportuje defineConfig s pluginem react, a soubor vitest.config.ts, který exportuje defineConfig s vlastností test.

vitest.config.ts

import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom",
    css: true,
    setupFiles: "./src/tests/setup",
  },
});

Tím se problém nevyřeší, možným důvodem je, že můj soubor setupFiles neběží správně (mám soubor setup v příslušném adresáři)

prozatím to je vše, co mám v setup.js

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

a technicky mohu výše uvedené importovat do svého testovacího souboru, ale stále chci, aby se spustil soubor s nastavením, protože v něm budu dělat i jiné věci.

Toto je můj tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "types": ["vitest/globals"]
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts", "vitest.config.ts"]
}

Prosím dejte mi vědět, jestli je něco, co bych měl přidat.