前端 - 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.jsxconst 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.jsimport { 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就不报错了（又大意了）