библиотека реактивного тестирования | Невозможно разделить тест на более мелкие куски внутри метода описания - PullRequest
Новая
       13

библиотека реактивного тестирования | Невозможно разделить тест на более мелкие куски внутри метода описания

1 голос
/ 20 апреля 2019

Я изучаю модульное тестирование. Реактивируйте компоненты, используя реагирующая библиотека-тестирования

. Однако у меня правильно отображается компонент, когда я собираюсь разбить тест на более мелкие фрагменты внутри.describe() функция.Тест прерывается, и вот почему.

Текущий только один или другой test() проходит, но не оба 

import React from 'react'
import 'react-testing-library/cleanup-after-each'
import { render, fireEvent } from 'react-testing-library'
import Quantity from '../components/Quantity'

describe('Quantity Component', () => {
  const { container, getByTestId } = render(<Quantity />)

// first test
  test('checks that quantity is never 0', () => {
    expect(getByTestId('quantity')).not.toBe('0')
  })

// second test
  test('checks for the initial product quantity count', () => {
    expect(getByTestId('quantity')).toHaveTextContent('1')

    fireEvent.click(getByTestId('increment'))
    expect(getByTestId('quantity')).toHaveTextContent('2')
  })
})

При попытке запустить оба теста возникают ошибки: Unable to find an element by: [data-testid="quantity"]

[data-testid="quantity"] - это просто атрибут, который я передал в желаемый тег JSX.

Тест проходит при выполнении только первого или второго теста, но не обоих одновременно.

Чего мне здесь не хватает?

Ответы [ 3 ]

1 голос
/ 20 апреля 2019

Вам также необходимо использовать очистку afterEach. 

describe('your tests', () => {
  afterEach(cleanup);
  beforeEach(() => ({container, getById} = render(<Quantity />))

  it('does something', () => {
    expect(getByTestId('quantity')).toHaveTextContent(0);
  }
}
1 голос
/ 20 апреля 2019

Поперечное загрязнение строго не рекомендуется при модульном тестировании.

Проблема заключается в том, что настройка происходит только один раз для Quantity Component комплекта, в то время как это следует делать для каждого теста. Вот для чего beforeEach: 

describe('Quantity Component', () => {
  let container, getByTestId;

  beforeEach(() => {
    ({ container, getByTestId } = render(<Quantity />));
  });
  ...
0 голосов
/ 16 мая 2019

Я предлагаю вам вызвать render внутри ваших it предложений, это облегчает управление тестами: 

describe('Quantity Component', () => {  
  test('checks that quantity is never 0', () => {
    const { container, getByTestId } = render(<Quantity />)
    expect(getByTestId('quantity')).not.toBe('0')
  })

  test('checks for the initial product quantity count', () => {
    const { container, getByTestId } = render(<Quantity />)
    expect(getByTestId('quantity')).toHaveTextContent('1')

    fireEvent.click(getByTestId('increment'))
    expect(getByTestId('quantity')).toHaveTextContent('2')
  })
})

Дополнительным преимуществом является то, что если по какой-то причине один из ваших тестов должен быть запущен с разными реквизитами, вы можете сделать это проще с помощью этой настройки.

...