javascript - 开玩笑 预期模拟函数已被调用,但未调用
问题描述
我已经查看了各种建议来解决没有成功测试类属性的问题,并且想知道是否有人可以更清楚地了解我可能出错的地方,这是我尝试过的所有测试,错误为 Expected mock函数已经被调用,但它没有被调用。
搜索.jsx
import React, { Component } from 'react'
import { func } from 'prop-types'
import Input from './Input'
import Button from './Button'
class SearchForm extends Component {
static propTypes = {
toggleAlert: func.isRequired
}
constructor() {
super()
this.state = {
searchTerm: ''
}
this.handleSubmit = this.handleSubmit.bind(this)
}
handleSubmit = () => {
const { searchTerm } = this.state
const { toggleAlert } = this.props
if (searchTerm === 'mocky') {
toggleAlert({
alertType: 'success',
alertMessage: 'Success!!!'
})
this.setState({
searchTerm: ''
})
} else {
toggleAlert({
alertType: 'error',
alertMessage: 'Error!!!'
})
}
}
handleChange = ({ target: { value } }) => {
this.setState({
searchTerm: value
})
}
render() {
const { searchTerm } = this.state
const btnDisabled = (searchTerm.length === 0) === true
return (
<div className="well search-form soft push--bottom">
<ul className="form-fields list-inline">
<li className="flush">
<Input
id="search"
name="search"
type="text"
placeholder="Enter a search term..."
className="text-input"
value={searchTerm}
onChange={this.handleChange}
/>
<div className="feedback push-half--right" />
</li>
<li className="push-half--left">
<Button className="btn btn--positive" disabled={btnDisabled} onClick={this.handleSubmit}>
Search
</Button>
</li>
</ul>
</div>
)
}
}
export default SearchForm
第一个选项:
it('should call handleSubmit function on submit', () => {
const wrapper = shallow(<Search toggleAlert={jest.fn()} />)
const spy = jest.spyOn(wrapper.instance(), 'handleSubmit')
wrapper.instance().forceUpdate()
wrapper.find('.btn').simulate('click')
expect(spy).toHaveBeenCalled()
spy.mockClear()
})
第二种选择:
it('should call handleSubmit function on submit', () => {
const wrapper = shallow(<Search toggleAlert={jest.fn()} />)
wrapper.instance().handleSubmit = jest.fn()
wrapper.update()
wrapper.find('.btn').simulate('click')
expect(wrapper.instance().handleSubmit).toHaveBeenCalled()
})
我通过类属性得到,该函数是需要更新组件才能注册函数的类的实例,但是看起来组件handleSubmit函数被调用而不是模拟?
将 handleSubmit 换成类函数作为方法让我可以访问类原型,该类原型在监视 Search.prototype 时通过了测试,但我真的很想获得类属性方法的解决方案。
所有建议和建议将不胜感激!
解决方案
我认为单元测试应该足够健壮,以捕获error
任何不需要的代码更改的情况。
请在您的测试中包含严格的断言。
对于条件语句,请同时覆盖分支。例如,在if
andelse
语句的情况下,您将不得不编写two
测试。
对于用户操作,您应该尝试模拟操作,而不是手动调用函数。
请看下面的例子,
import React from 'react';
import { shallow } from 'enzyme';
import { SearchForm } from 'components/Search';
describe('Search Component', () => {
let wrapper;
const toggleAlert = jest.fn();
const handleChange = jest.fn();
const successAlert = {
alertType: 'success',
alertMessage: 'Success!!!'
}
const errorAlert = {
alertType: 'error',
alertMessage: 'Error!!!'
}
beforeEach(() => {
wrapper = shallow(<SearchForm toggleAlert={toggleAlert} />);
});
it('"handleSubmit" to have been called with "mocky"', () => {
expect(toggleAlert).not.toHaveBeenCalled();
expect(handleChange).not.toHaveBeenCalled();
wrapper.find('Input').simulate('change', { target: { value: 'mocky' } });
expect(handleChange).toHaveBeenCalledTimes(1);
expect(wrapper.state().searchTerm).toBe('mocky');
wrapper.find('Button').simulate('click');
expect(toggleAlert).toHaveBeenCalledTimes(1);
expect(toggleAlert).toHaveBeenCalledWith(successAlert);
expect(wrapper.state().searchTerm).toBe('');
});
it('"handleSubmit" to have been called with "other than mocky"', () => {
expect(toggleAlert).not.toHaveBeenCalled();
expect(handleChange).not.toHaveBeenCalled();
wrapper.find('Input').simulate('change', { target: { value: 'Hello' } });
expect(handleChange).toHaveBeenCalledTimes(1);
expect(wrapper.state().searchTerm).toBe('Hello');
wrapper.find('Button').simulate('click');
expect(toggleAlert).toHaveBeenCalledTimes(1);
expect(toggleAlert).toHaveBeenCalledWith(errorAlert);
expect(wrapper.state().searchTerm).toBe('Hello');
});
});
推荐阅读
- javascript - 通过 Google Apps 脚本在 Google 表单中禁用文本选择、复制、剪切和粘贴
- winapi - 浏览器标签是子窗口吗?
- node.js - Google Drive Api v3“找不到文件”
- reactjs - Gatsby + Netlify CMS - 错误您网站的“gatsby-node.js”必须在创建页面时设置页面路径
- c++ - Stb 图像未正确加载数据
- python - 根据字符串位置过滤?
- python - 使用 OpenCv 读取的视频帧数不一致
- python - 未找到任何参数的“出价”反向。尝试了 1 种模式:['dasboard/orders/add/(?P
[0-9]+)$'] - maven - 使用 mvn exec:java 运行时的 ClassNotFoundExeption
- php - 忽略 MySQL 查询中的空“$_POST”值