mardi 1 décembre 2020

React Testing keeps fetching getByText

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..?

Aucun commentaire:

Enregistrer un commentaire