Тестирование мелкой визуализации wrapper.props не определено

Я хочу протестировать следующий код:

<React.Fragment>
    <Connect />
    <FlatList
        data = {[
            {key: "pp", title: "Privacy Policy"},
            {key: "tos", title: "Terms of Service"},
        ]}
        renderItem = {({item}) => {
            return (
                <View
                    onPress = {() => this.handleOnPress(item.key)}
                >
                    <Text>{item.title}</Text>
                </View>
            );
        }}
    />
</React.Fragment>

Это мои тесты:

it("should render a FlatList with 2 items", () => {
        const wrapper = shallow(
            <Menu
            />
        );
        expect(wrapper).toMatchSnapshot();
        expect(wrapper.props().data).toHaveLength(2);
    });

По какой-то причине он не работает и показывает, что .data не определен. Я в основном хочу проверить, что в моем плоском списке 2 пункта.

reactjs react-native chai enzyme

10.10.2018 01:08

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

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

778

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если я понимаю проблему, то похоже, что вы пытаетесь получить .props() из <Menu/> (оболочка), а не <FlatList/>, который является дочерним элементом оболочки.

Используя метод .childAt, вы сможете решить проблему со следующим:

it("should render a FlatList with 2 items", () => {
    const wrapper = shallow(
        <Menu
        />
    );
    expect(wrapper).toMatchSnapshot();

    // expect(wrapper.props().data).toHaveLength(2);

    expect(
      wrapper // the wrapper of 'Menu'
      .childAt(1) // the second child of the 'Menu' which is the 'FlatList'
      .props() // the props of 'FlatList'
      .data // the data field of 'FlatList' props
    ).toHaveLength(2);
});

Вот дополнительная информация о методе .childAt() - надеюсь, это поможет

10.10.2018 01:18

Другие вопросы по теме

React Navigation - ошибка createStackNavigator - "Не определено - это не функция"

Ошибка простого хранилища React-Native: невозможно загрузить RocksDB, SQLite или AsyncLocalStorage

Как сохранить некоторые данные, введенные пользователем, в некоторые формы и сохранить их на локальном устройстве с помощью AsyncStorage

Приложение в фоновом режиме с setTimeout и push-уведомлением

Navigation.navigate никуда не денется

Сбой сборки выпуска React Native и RNFirebase iOS

Как изменить карту, если локации Pickup и DrofOff заданы в textinputs (React Native)

Как передать свойства функции в BottomTabNavigator

Ручная настройка библиотек React Native в Visual Studio Code

Как пройти навигацию через метод?

Тестирование мелкой визуализации wrapper.props не определено

Ответы 1

Другие вопросы по теме

Похожие вопросы