@SeeYou1ater

Ошибка при тестировании, RTL. Cannot log after tests are done. Did you forget to wait for something async in your test?

Вылезает ошибка при попытке тестировать компонент на отрисовку. "Cannot log after tests are done. Did you forget to wait for something async in your test?" В screen.debug() всегда Loading...

Contacts.test.tsx

import { screen } from '@testing-library/react';
import { renderWithRedux } from '../../../hoc/renderWithRedux';
import Contacts from './Contacts';


it('Contacts empty renders', async () => {
  renderWithRedux(<Contacts />, {initialState: {isAuth: false, contacts: null, authUser: null}})        
  await screen.findByText('You are not authorized!')
  screen.debug()
});

it('Contacts renders', async () => {
  renderWithRedux(<Contacts />, {initialState: {isAuth: true, contacts: [], authUser: null}})        
  await screen.findByText('Contact list is empty...')
  screen.debug()
});

it('Contacts renders', async () => {
  renderWithRedux(<Contacts/>, {initialState: {isAuth: false, contacts: [{
    "email": "adad@mail.ru",
    "id": 1
  },
  {
    "email": "adades@mail.ru",
    "id": 2
  }], authUser: null}})        
  await screen.findByText('You are not authorized!')
  screen.debug()
});


Contacts.tsx

import { useEffect, useState } from "react"
import { UserType } from "../../../api/api"
import { addContactActionCreator, findContactActionCreator, getContactsThunkCreator } from "../../../redux/appReducer"
import './Contacts.css'
import User from "../../User/User"
import Menu from "../../common/Menu"
import { useAppDispatch, useAppSelector } from "../../../hooks"


const Contacts = () => {
  const dispatch = useAppDispatch()
  const contacts = useAppSelector( state => state.contacts )
  const isAuth = useAppSelector( state => state.isAuth )
  let [contact, setContact] = useState('')
  let [term, setTerm] = useState('')

  useEffect( () => {
    dispatch(getContactsThunkCreator())
  }, [])

  if (!contacts) { return <div>Loading...</div> } else if (contacts.length === 0) {return <div>Contact list is empty...</div>} else
   { if (!isAuth) { return <div className='contacts'>
      <div>
        <Menu/>
        <h2>Contacts</h2>
        <p>You are not authorized!</p>
      </div>
    </div> } else return (
    <div className='contacts'>
      <div>
        <Menu/>
        <h2>Contacts</h2>
        <input className="find-contact-input input" placeholder='try enter a name' type="text" value={term} onChange={(e) => { setTerm(e.currentTarget.value) }}/>
        <button onClick={ () => { dispatch(findContactActionCreator(term)) } } className="find-contact-button button">Find</button>
        <ul>
          {contacts.map( (el: UserType) => <User key={el.id} email={el.email} id={el.id}/>)}
        </ul>
        <div className="add-contact-block">
          <input className="add-contact-input input" placeholder='enter a name' type="text" value={contact} onChange={(e) => { setContact(e.currentTarget.value) }}/>
          <button onClick={ () => { dispatch(addContactActionCreator(contact)) } } className="add-contact-button button">Add contact</button>  
        </div>
      </div>
    </div>
  ) }
}


export default Contacts
  • Вопрос задан
  • 44 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы