I have been trying to Test my react code by putting some key word inside my todo list and then clearing the array when the testing clicks my clear button. But my test keeps failing. It says
● add todo
expect(element).toHaveTextContent()
Expected element to have text content:
Go to coffee
Received:
AddClear
15 | fireEvent.click(button);
16 |
> 17 | expect(container).toHaveTextContent('Go to coffee');
| ^
18 |
19 | const clearbutton = getByText('Clear');
20 | fireEvent.click(clearbutton);
Here is my code
import React, { useState } from 'react';
function App() {
const [todo, setTodo] = useState({desc:'', date:''});
const [todos, setTodos] = useState([]);
const addTodo = (event) => {
event.preventDefault();
setTodos([...todos, todo]);
setTodo({ desc: '' , date:'' });
}
const inputChanged = (e) => {
setTodo({...todo, [e.target.name]: e.target.value});
}
const clearAll = () => {
setTodo([]);
}
return (
<div className="App">
<input type="text"placeholder="Date"name="date"
value={todo.date} onChange={inputChanged}/>
<input type="text"placeholder="Description"
name="desc"value={todo.desc} onChange={inputChanged}/>
<button onClick={addTodo}>Add</button>
<button onClick={clearAll}>Clear</button>
</div>
);
}
export default App;
Testing code.
import React from 'react';
import App from './App.js'
import{ fireEvent, render} from'@testing-library/react';
import '@testing-library/jest-dom/extend-expect'
test('add todo', () => {
const { container, getByText, getByPlaceholderText}= render(<App/>);
const desc = getByPlaceholderText('Description');
fireEvent.change(desc, { target:{ value:'Go to coffee'} })
const date= getByPlaceholderText('Date');
fireEvent.change(date, { target:{ value:'29.11.2019'} })
const button= getByText('Add');
fireEvent.click(button);
expect(container).toHaveTextContent('Go to coffee');
const clearbutton = getByText('Clear');
fireEvent.click(clearbutton);
expect(container).not.toHaveTextContent('Go to coffee');
})
Does anyone know why it keeps fetching the word in getByText?? And how I can solve them..?
