vitest测试报错?

Question

vitest测试报错?

按照这篇教程我配置了测试环境来测试react组件，但是报错了，不知道为什么？

环境的介绍

• 用vite来构建我们的项目
• 安装vitest、jsdom、@testing-library/react、@testing-library/jsdom

• 在根目录下创建testSetup.js

  import { afterEach } from 'vitest'
  import { cleanup } from '@testing-library/react'
  import '@testing-library/jest-dom/vitest'
  
  afterEach(() => {
  cleanup()
  })

• 修改vite.config.js

  export default defineConfig({
  // ...
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './testSetup.js', 
  }
  })

• 修改package.json文件

  scripts: {
    ...
    test: "vitest run"
  }

  React组件

  // src/component/Note.jsx
  const Note = ({ note, toggleImportance }) => {
  const label = note.important ? "make not important" : "make important";
  
  return (
    <li className="note">
      {note.content}
      <button onClick={toggleImportance}>{label}</button>
    </li>
  );
  };
  
  export default Note;

测试

// src/component/Note.test.js
import { render, screen } from "@testing-library/react";
import Note from "./Note";

test("renders content", () => {
  const note = {
    content: "Component testing is done with react-testing-library",
    important: true,
  };

  render(<Note note={note} />);

  const element = screen.getByText(
    "Component testing is done with react-testing-library"
  );
  expect(element).toBeDefined();
});

报错

Error: Expression expected
❯ getRollupError node_modules/vitest/node_modules/rollup/dist/es/shared/parseAst.js:376:41
❯ convertProgram node_modules/vitest/node_modules/rollup/dist/es/shared/parseAst.js:1040:26
❯ parseAstAsync node_modules/vitest/node_modules/rollup/dist/es/shared/parseAst.js:2186:12
❯ ssrTransformScript node_modules/vitest/node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:54248:15

猜测：是不是和jsx语法有关? 我注释掉render及之后的操作是不会报错的，只注释render之后的操作会报错，这个错误应该出现在render的调用过程中。

Answer 1

打上断点调试了一下，提示说遇到了一个非预期的token<，说明它没法识别jsx语法。我的文件名后缀为js，改成jsx就不报错了（又大意了）