运行Vitest时出错，无法解析渲染？

Question

安装 vitest 并编写简单的验证测试后，我很难破坏测试。

运行 vitest 时出现此错误：

    FAIL  __tests__/components/Searchbar.test.js [ __tests__/components/Searchbar.test.js ]
    Error: Parse failure: Unexpected token (8:15)
    At file: C:/frontend/__tests__/components/Searchbar.test.js
    Contents of line 8:         render(<SearchBar />);

下面是我的 vite.config.js:

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

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

export default defineConfig({
    plugins: [react()],
    test: {
        globals: true,
        environment: 'happy-dom',
    },
    extensions: ['js', 'jsx'],
})

下面是我的SearchBar.js

import React from 'react';

export default function SearchBar() {
    return (
        <input
            type="text"
            placeholder="Search..."
        />
    );
}

下面是我的SearchBar.test.js

import { describe, test, expect } from "vitest";
import { render, screen } from "@testing-library/react";
import SearchBar from "../../src/pages/components/SearchBar";


describe('SearchBar component', () => {
    test('renders the search button', () => {
        render(<SearchBar />);
        const searchInput = screen.getByPlaceholderText('Search...');
        expect(searchInput).toBeInTheDocument();
    });
});

如何修复此错误？

Answer 1

您需要使用

jsx

扩展来在测试中渲染 React 组件。将

SearchBar.test.js

更改为

SearchBar.test.jsx