如何在酶反应中模拟按钮点击?

Question

模拟按钮单击似乎是一个非常简单/标准的操作。但是，我无法让它在 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');

Answer 1

首先你有测试(...它(...在您的测试中。那跑不了。它应该被描述(...它(...

其次，React 测试库使你想要实现的目标变得非常容易(取代酶(：

反应测试库

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
...

Answer 2

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

该库取决于 @babel/运行时的 es-modules 版本，需要与 webpack 或 rollup 一起使用。

祝你有美好的一天:)