VITEST Issue using await userevent.type(input, "Some text"), when appear an empty entry in my list

101 Views Asked by At

In the below code , in the line await user.type(input, "Maxteria") create an empty entry in my list, see the screen.debug below. Do you have any idea about wath?

import React from 'react'
import userEvent from '@testing-library/user-event'
import { describe, test, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import App from '../src/App'
import { act } from 'react-dom/test-utils'

describe('<App />', () => {
  test('should add items and and remove then', async () => {
    const user = userEvent.setup()

    render(<App />)

    // Buscar el input por role
    const input = screen.getByRole('textbox')
    expect(input).toBeDefined()

    // buscar en el formulario
    const form = screen.getByRole('form')
    expect(form).toBeDefined()

    const button = form.querySelector('button')
    expect(button).toBeDefined()

    // Escribir en el input
    await user.type(input, "Maxteria")
    await user.click(button!)

    // Buscar el elemento en la lista
    const list = screen.getByRole('list')
    expect(list).toBeDefined()
    expect(list.childNodes.length).toBe(1)
  })
})

Screen Debug

 <ul>
          <li>
            <button>
              Eliminar
            </button>
          </li>
          <li>
            Maxteria
            <button>
              Eliminar
            </button>
          </li>
        </ul>
      </section>

Thanks in advance, and let me know if you need more context. Thanks

I want

 <ul>
   <li>Maxteria<button>Eliminar</button></li>
 </ul>

and i got LoL

 <ul>
   <li><button>Eliminar</button></li>
   <li>Maxteria<button>Eliminar</button></li>
 </ul>
0

There are 0 best solutions below