如何在React Jest测试中用Enzyme模拟按钮点击？遇语法错误求助

我看你在测试React组件的按钮点击时遇到了两个问题：一个是JSX语法解析错误，另一个是测试逻辑的断言不生效。咱们一步步来解决：

你遇到的问题详情 #

待测试的Home组件代码 #

class Home extends React.Component {
 constructor(props) {
  super(props)
  this.state = { showAssessment: false };
 }
 assessment = (boolean) => {
  this.setState({ showAssessment: boolean })
 }
 render() {
  if (this.state.showAssessment === true) {
   return <App assessment = { this.assessment } />
  } else {
   return (
    <div className='container-fluid' style={landingPage}>
     <Component1 />
     <button className='btn btn-dark' style={matchToolButton} onClick = { () => this.assessment(true) }> Match Tool </button>
    </div>
   )
  }
 }
}

你编写的测试代码 #

import React from 'react';
import { shallow, mount, render } from 'enzyme';
import Home from './Home';
test ('Home Button', () => {
 it ('It calls assessment function when clicked', () => {
  const wrapper = mount(<Home/>); // rendering the home component/ testing
  wrapper.instance().assessment = jest.fn(); //if this isn't working try wrapper.instance().assessment
  wrapper.find('button').simulate('click');
  expect(wrapper.assessment).toHaveBeenCalled();// see comment on line 14 keep the same
 });
});

报错信息 #

FAIL src/Home.test.js
● Test suite failed to run
/Users/mbyousaf/Desktop/Bucket/dsp_poc2_uwe/front-end/src/Home.test.js: Unexpected token (12:30)
10 |

> 12	const wrapper = mount( return (<Home/>) ); // rendering the home component/ testing
^
wrapper.instance().assessment = jest.fn(); //if this isn't working try wrapper.instance().assessment
wrapper.find('button').simulate('click');

第一步：解决JSX语法解析错误 #

这个Unexpected token错误是因为Jest默认无法处理JSX语法，你需要确保Babel配置正确：

1. 安装必要的Babel依赖：

npm install --save-dev @babel/preset-react @babel/plugin-proposal-class-properties

2. 在项目根目录的babel.config.js（或.babelrc）中配置：

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react' // 支持JSX语法
  ],
  plugins: [
    '@babel/plugin-proposal-class-properties' // 支持组件中的类字段语法
  ]
};

如果是Create React App项目，默认已经有正确配置，可尝试删除node_modules和package-lock.json后重新执行npm install。

第二步：修正测试逻辑问题 #

你的测试代码有两个核心错误：

• 直接替换实例方法后，组件未重新渲染，点击时调用的还是原方法
• 断言对象错误，方法挂载在组件实例上，而非wrapper本身

推荐用jest.spyOn监听方法，更可靠，修改后的测试代码如下：

import React from 'react';
import { mount } from 'enzyme';
import Home from './Home';

test('Home Button clicks trigger assessment function', () => {
  const wrapper = mount(<Home/>);
  // 监听组件实例的assessment方法
  const assessmentSpy = jest.spyOn(wrapper.instance(), 'assessment');
  // 强制更新组件，确保spy生效
  wrapper.instance().forceUpdate();
  
  // 模拟按钮点击
  wrapper.find('button').simulate('click');
  
  // 断言方法被调用，且传入正确参数
  expect(assessmentSpy).toHaveBeenCalledWith(true);
  
  // 测试完成后恢复原方法，避免影响其他测试
  assessmentSpy.mockRestore();
});

内容的提问来源于stack exchange，提问作者M B