@xULAIROW

Как правильно написать тест на реакт компонент?

Всем привет, возникли сложности с понимаем как писать юнит тесты под React (jest + react testing library)

Ниже описан простой компонент, для него вижу тесты:

Проверить: что при клике на кнопку button вызовется функция handleChange, и так же функция onChange с правильным аргументом пустого массива?
Вопрос: нужно ли проверять вызов handleChange если вся логика завязана на onChange? Как правильно замокать onChange что бы проверить её вызов с переданным аргументом?

Плюс непонятно как описать тест для внутренней функции и проверить правильность переданного аргумента

// Component
const SomeComponent = ({onChange}) => {

const handleChange = () => {
   onChange([])
}
   return (
      <Button label="Clear" onClick={handleClear}/>
    )
}

// Test
describe('Some component', () => {
    test('call handleClear', () => {
        const handleChange = jest.fn()

        render(<SomeComponent onChange={onChange}/>) 

        const button =  screen.getByText('Clear')

       userEvent.click(button)

       expect(handleChange).toBeCalled 
  
    })
})
  • Вопрос задан
  • 55 просмотров
Пригласить эксперта
Ответы на вопрос 1
Alexandroppolus
@Alexandroppolus
кодир
Здесь нужен отдельный тест на Button, который проверит что кнопка зарендерилась с надписью и что при клике вызывается onClick

В тесте для SomeComponent проверяешь только вызов onChange
expect(handleChange).toHaveBeenCalledWith([]);
Ответ написан
Ваш ответ на вопрос

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

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