reactjs - 使用反应测试工具测试选择更改
问题描述
我有以下组件:
import React from 'react';
import { useHistory } from 'react-router-dom';
import Logo from '../../Commons/Components/Logo';
const ComponentList = () => {
let history = useHistory();
const handleSelectChange = e => {
history.push(`/component-list/${e.target.value}`);
};
return (
<div className="container">
<div className="row">
<div className="col-md">
<section className="app">
<Logo />
</section>
</div>
</div>
<div className="row">
<div className="col-md"></div>
<div className="col-md">
<section className="app">
<select
id="components-select"
name="select"
onBlur={handleSelectChange}
onChange={handleSelectChange}
>
<option value="">-- Componentes --</option>
<option value="ui-textarea">ui-textarea</option>
<option value="ui-collapse">ui-collapse</option>
<option value="ui-checkbox">ui-checkbox</option>
<option value="ui-input">ui-input</option>
<option value="ui-select">ui-select</option>
<option value="ui-button">ui-button</option>
<option value="ui-input-date-picker">ui-input-date-picker</option>
<option value="ui-input-iban">ui-input-iban</option>
<option value="ui-tooltip">ui-tooltip</option>
<option value="ui-carousel">ui-carousel</option>
<option value="ui-document-viewer">ui-document-viewer</option>
<option value="ui-loader">ui-loader</option>
<option value="ui-card">ui-card</option>
<option value="ui-charts">ui-charts</option>
<option value="ui-data-grid">ui-data-grid</option>
<option value="ui-list">ui-list</option>
<option value="ui-modal">ui-modal</option>
<option value="ui-pagination">ui-pagination</option>
<option value="ui-wizard">ui-wizard</option>
<option value="ui-icon">ui-icon</option>
</select>
</section>
</div>
<div className="col-md"></div>
</div>
</div>
);
};
export default ComponentList;
我正在尝试以这种方式进行测试:
it('should call history.push on change component list selected value', async () => {
const history = createMemoryHistory();
history.push = jest.fn();
act(() => {
render(
<MemoryRouter>
<ComponentList />
</MemoryRouter>,
container
);
});
const element = document.getElementById('components-select');
act(async () => {
await Simulate.select(element, { target: { value: 'ui-textarea' } });
});
expect(element.value).toBe('ui-textarea');
expect(element.options[1].selected).toBeTruthy();
expect(history.push).toHaveBeenCalled();
});
但不能让它工作,我也试过:
act(async () => {
await Simulate.change(element, { target: { value: 'ui-textarea' } });
});
解决方案
在您的实现中,history
对象是调用useHistory
钩子的结果,并且要测试它的对象推送是否已被调用,您必须useHistory
返回一个带有push
方法的对象,该方法是一个笑话函数。
为此,您可以使用jest.spyOn
import * as History from 'react-router-dom';
const spy = jest.spyOn('useHistory', History)
const mockHistory = {
push: jest.fn()
};
spy.mockReturnValue(mockHistory);
或模拟整个模块
import { useHistory } from 'react-router-dom';
jest.mock('react-router-dom');
const mockHistory = {
push: jest.fn()
};
useHistory.mockReturnValue(mockHistory);
然后你就可以断言返回的历史对象push
应该被调用
expect(mockHistory.push).toHaveBeenCalled();
推荐阅读
- javascript - Google Drive API - 使用 JSZip 获取文件和压缩文件返回损坏的文件
- python-3.x - 如何更换或删除时钟时间?
- python - 如何从给定记录中获取用户 ID 值
- react-native - 如果我使用按钮代替它,则无法执行 TouchableOpacity 或 TouchableHighlight 的 onPress 它工作我做错了什么?
- javascript - 如何将所选项目传递给axios
- python - python在打印功能后离开线
- java - URL 参数正在被修改
- matlab - 如何将此特定时间戳编号转换为日期?
- r - rtweet 函数“get_followers”不返回任何内容
- android - 在 Android 上,如何在网络层 (IP) 上捕获传入的数据包?