Блог

Существует глобальный компонент Snackbar, для которого я пишу тесты. Сам компонент довольно прост.

У него есть некоторый текст, показывающий статус (который не является prop или свойством данных, а скорее производным от объекта, отправленного с EventBus.$emit вызовом).

Через три секунды компонент исчезает ИЛИ отображает другую панель закусок, хранящуюся в массиве внутри самого компонента.

Итак, я хочу проверить здесь две вещи:

1. В любой момент времени появляется только одна панель закусок (которую, я полагаю, я получил).
2. Через три секунды должна появиться другая панель закусок.

Вот мой код на данный момент:

 import { render } from '@testing-library/vue'
import Snackbar from '../Snackbar.vue'
import EventBus from '@/services/EventBus'

describe('Snackbar', () => {
  const role = 'alert'

  it('should show only one snackbar at a time and should disappear after 3 seconds', async () => {
    const { getByRole } = render(Snackbar, {stubs: ['ButtonComponent']})
    for (let x = 0; x < 2; x  ) {
      const text = `Hello ${x}`    
      await EventBus.$emit('addSnack', { text })
    }

    const snackbar = getByRole(role)
    expect(snackbar).toHaveTextContent('Hello 0')

    // This might be redundant?
    expect(snackbar).not.toHaveTextContent('Hello 1')
    
    // Here is the problem (this never throws an error)
    await waitFor(() => {
      const snackbar2 = getByRole(role)
      expect(snackbar2).toHaveTextContent('Hello 1');
    }, 3500)
})

 

Вам нужно сделать it тест асинхронным:

 it('should detect an asynchronous thing', async () => {

  await waitFor(() => {
    const something = myFunction();
    expect(something).toBe(true);
  }, 3500);

});
 

См. раздел JEST> Тестирование асинхронного кода> Асинхронный / Ожидающий