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

Question

[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 
  
    })
})

Answer 1

[Alexandroppolus]

Здесь нужен отдельный тест на Button, который проверит что кнопка зарендерилась с надписью и что при клике вызывается onClick

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

Comments

[xULAIROW]

Т.е по факту это уже не юнит тест, а интеграционный? Взаимодействие компонетов A и B?

[Alexandroppolus]

xULAIROW, ну в каком-то смысле да.
В react testing library нет функции, аналогичной shallow из enzyme, которая бы рендерила сам компонент, но не рендерила все пользовательские компоненты, в нем используемые, потому что testing library заточена под "реальный" рендер с помощью jsdom - то есть в "условиях, максимально близких к боевым".

Так что если не хочешь, чтобы в тесте SomeComponent участвовал Button, придется его замокать. Но только ради симуляции клика смысла в этом особо нет. Вот чтобы посмотреть входящие пропсы для Button, можно так сделать.

[xULAIROW]

Alexandroppolus, Окей спасибо)