I've looked at various suggestions to solve testing a class property with no success and was wondering if anyone could possibly cast a little more light on where I may be going wrong, here are the tests I've tried all with the error Expected mock function to have been called, but it was not called.
Search.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
First option:
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()
})
Second option:
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()
})
I get that with a class property the function is an instance of the class requiring the component to be updated in order to register the function, it looks however like the component handleSubmit function gets called instead of the mock?
Swapping out handleSubmit to be a class function as a method gives me access on the class prototype which passes the test when spying on Search.prototype but I'd really like to get a solution to the class property approach.
All suggestions and recommendations would be grateful!