React Native Testing - Как TDD и тестировать компоненты за снимками?

Question

Я действительно борется с тем, как протестировать React Native, кроме использования снимков из шутки. Они отлично подходят для тестирования внешнего вида, основанного на некоторых данных, передаваемых в компонент, но не похоже, что есть способ проверить события или обработчики событий, проверить, правильно ли были установлены или отключены прослушиватели событий в методах жизненного цикла и т. Д. ... похоже, что я либо что-то упускаю, либо инструмент не завершен.

Также при тестировании моментального снимка на стороне заметьте назад в терминах TDD, поскольку вы можете писать свои тесты только после того, как у вас есть код приложения ... какие-либо мысли по этому поводу?

Answer 1

С тестом снимка вы можете только проверить значения в реквизите и стилях и т.д. Чтобы проверить, какую-то логику в контейнере я использовал «мелкий» от фермента;)

Answer 2

Вы можете использовать снимки с событиями для таких вещей, как : нажмите кнопку и убедитесь, обработанный выход после щелчка:

it('should render Markdown in preview mode',() => { 
    const wrapper = shallow(
    <MarkdownEditor value="*Hello* Jest!" /> 
); 

    expect(wrapper).toMatchSnapshot(); 

    wrapper.find('[name="toggle-preview"]').simulate('click'); 

    expect(wrapper).toMatchSnapshot(); 
}); 

Чтобы проверить, что обработчик событий было вызван свойством вы можете сделать что-то вроде этого:

it('should pass a selected value to the onChange handler',() => { 
    const value = '2'; 
    const onChange = jest.fn(); 
    const wrapper = shallow(
    <Select items={ITEMS} onChange={onChange} /> 
); 

    expect(wrapper).toMatchSnapshot(); 

    wrapper.find('select').simulate('change', { 
    target: { value }, 
    }); 

    expect(onChange).toBeCalledWith(value); 
}); 

(Оба примера взяты из моей статьи по адресу testing React components with Jest.)