In my attempt to unit test the onClick event of a button in a component, I encountered some challenges. Specifically, I am unsure how to properly test the onClick event when it triggers a function like Add(value).
App.js
function App(){
const[value,setValue] = useState('')
const[list,setList] = useState([])
function Add(el){
let updatedList = [...list,el]
setList(updatedList)
}
return(
<div>
<input data-testid="inpField" type="text" onChange={(e)=>setValue(e.target.value)}
<button data-testid="btn" onClick={()=>Add(value)}>Add</button>
{list.map((post,index) => <li key={index}>{post}</li>)}
</div>
)
I've attempted the following approach, but encountered an error - Expected number of calls: >=1 but received number of calls: 0
App.test.js
test('btn click',()=>{
const Add = jest.fn()
render(<App/>)
const button = screen.getByTestId('btn')
fireEvent.click(button)
expect(Add).toHaveBeenCalled()
})
All necessary imports are assumed to have been completed. P.S.:- I prefer not to use enzyme unless absolutely necessary.