使用Jest与React Testing Library测试时出现SyntaxError异常求助

我在测试计数器组件的“点击递减按钮数值不会低于0”功能时，使用Jest和React Testing Library执行测试，持续出现SyntaxError: Invalid or unexpected token错误。

相关代码 #

Counter.test.js

import Counter from 'components/Counter';
import { render, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';

describe('Counter Testing', () => {
  it('should pass', () => {
    const { container } = render(<Counter></Counter>);
    expect(container.querySelector('#count-value')).toHaveTextContent('0');
    fireEvent.click(container.querySelector('#decrement-btn'));
    expect(container.querySelector('#count-value')).toHaveTextContent('0');
  });
});

Counter.js

import { useEffect, useState } from "react";

const Counter = props => {
  const {count, setCount} = useState(0);

  const handleIncrement = () =>{
     count<10 ? setCount(count+1) :null;
  }
  const handleDecrement = () =>{
     count>0 ? setCount(count-1) :null;
  }

  return (
    <div>
      Counter: <span id='count-value'>{count}</span>
      <button onClick={handleIncrement} id='increment-btn'>+1</button>
      <button onClick={handleDecrement} id='decrement-btn'>-1</button>
    </div>
  );
};

export default Counter;

错误截图 #

问题排查与解决建议 #

• 修复useState解构错误
  Counter组件中useState返回的是数组，必须使用数组解构语法，而非对象解构：

  // 错误写法
  const {count, setCount} = useState(0);
  // 正确写法
  const [count, setCount] = useState(0);
  

  这个错误会导致count和setCount未被正确赋值，进而引发运行时错误，可能被Jest识别为语法异常。

• 检查Babel配置是否正确
  Jest需要Babel转译JSX和ES6+语法，确保项目中已安装必要依赖：

  npm install --save-dev @babel/preset-react @babel/preset-env babel-jest
  

  并在项目根目录创建.babelrc或babel.config.json文件，配置如下：

  {
    "presets": ["@babel/preset-env", "@babel/preset-react"]
  }
  

• 确认Jest配置是否包含React支持
  检查jest.config.js（或package.json中的jest字段），确保已配置transform规则处理JS/JSX文件：

  module.exports = {
    transform: {
      "^.+\\.(js|jsx)$": "babel-jest"
    }
  };
  

内容的提问来源于stack exchange，提问作者Sasi Rekha