javascript - 如何在 Enzyme React 中模拟按钮单击?
问题描述
模拟按钮点击似乎是一个非常简单/标准的操作。但是,我无法让它在 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');
解决方案
首先你有 test(... it(... 在你的测试中。那不能运行。它应该是 describe(... it(...
其次,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
...
推荐阅读
- compression - 为矩阵中的每一行识别唯一的一组单元格
- mysql - SQL 查询带入列中不存在的月份
- jboss - 无法找到 render-kit-id oracle.adf.rich 的 renderkit 实例
- mongodb - 如何将本地 Strapi 内容部署到 Heroku
- sublimetext3 - Sublime Text 3:在列布局中切换到堆栈中的下一个文件
- gpu - GKE - GPU nvidia - cuda 驱动程序不起作用
- tensorflow - 如何在 TF2.0 的 `tf.Module` 中初始化变量
- powerbi - 以月为基数的 Power BI YTD 计算
- python - Python 在工作正则表达式上不返回匹配项
- python-3.x - 在数据框行中查找唯一 ID