如何在 Enzyme React 中模拟按钮单击？答案

【问题标题】：How do i simulate a button click in Enzyme React?如何在 Enzyme React 中模拟按钮单击？
【发布时间】：2019-12-24 12:04:39
【问题描述】：

模拟按钮点击似乎是一个非常简单/标准的操作。但是，我无法让它在 reacyt Jest.js 测试中工作。

以下是我尝试过的内容，错误消息是什么以及我要测试的代码

我要测试的代码

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/>); // rednoing the home componenet/ 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 | 
        11 | 
      > 12 |         const wrapper = mount(<Home/>); // rednoing the home componenet/ testing
           |                               ^
        13 |          wrapper.instance().assessment = jest.fn(); //if this isn't working try wrapper.instance().assessment
        14 | 
        15 |         wrapper.find('button').simulate('click');

【问题讨论】：

看来问题不在于simulate 函数。您是否已将 enzyme-adapter-react-16 添加为项目依赖项并进行配置？
是的，我已经添加到我的项目依赖项中，但我遇到了同样的问题

标签： javascript reactjs jestjs enzyme

【解决方案1】：

首先你有 test(... it(... 在你的测试中。那不能运行。它应该是 describe(... it(...

Secondly React 测试库使您想要实现的目标变得非常容易（替换酶）：

react-testing-library

import { render, fireEvent } from "@testing-library/react";

describe('Home Button', () => {
  it ('It calls assessment function when clicked', () => {
    const { getByText } = render(<Home/>);
    fireEvent.click(getByText("Match Tool"));
    // test now whatever should be differnt after the button is clicked
    ...

【讨论】：

谢谢，但我得到了同样的错误：
``` FAIL src/Home3.test.js ● 测试套件无法运行 /Users/mbyousaf/Desktop/Bucket/dsp_poc2_uwe/front-end/src/Home3.test.js：意外令牌(12:38) 10 | it('点击时调用评估函数', () => { 11 | > 12 | const { getByText } = render (); | ^ 13 | 14 | fireEvent.click(getByText("Match Tool" )); ````
这里有一条评论可以解释你的错误：stackoverflow.com/questions/53305638/…

【解决方案2】：

我使用 renderprops.cjs.js 而不是 renderprops.js?。这解决了我的问题。

该库依赖于@babel/runtime 的es-modules 版本，需要配合webpack 或rollup 使用。

祝你有美好的一天:)

【讨论】：