Как получить реквизит компонента при модульном тестировании с помощью jestjs

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

console.info(wrapper.props()) 

должен возвращать объект props, но он возвращает некоторый объект jsx.

Пожалуйста, помогите получить реквизиты какого-то компонента, для которого я хочу написать тестовые примеры.

Вот мой код:

import React from 'react';
import {
    configure,
    shallow
} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

import MenuList from './MenuList';
import {
    Link
} from 'react-router-dom';

configure({
    adapter: new Adapter()
});

const footerItem = {
    label: '',
    links: [{
        label: '',
        link: '/'
    }]
}

describe('<MenuList />', () => {

            let wrapper;
            beforeEach(() => {
                    wrapper = shallow( < MenuList footerItem = {
                            footerItem
                        }
                        / > );
                    });

                it('should render Link', () => {
                    console.info(wrapper.props().footerItem); // This should print footerItem object but returning  undefined
                    expect(wrapper.find(Link).length).toBeGreaterThan(0);
                });
            });

// and here is the code of menulist component/


import React from 'react';
import { Link } from 'react-router-dom';

const menuList = (props) => {
    let linkArray=[];
        linkArray = props.footerItem.links.map((item,index)=>{
            return <li key = {index}>
                    <Link to = {item.link}>
                        {item.label}
                    </Link></li>
        })

   return (
        <div className = "footer-link">
            <h6>{props.footerItem.label}</h6>
                <ul>
                    {linkArray}
                </ul>
        </div>
   )
}
export default menuList;

Не уверен, что это исправит, но обычно при рендеринге чего-либо из реактивного маршрутизатора в тесте вы должны обернуть это в MemoryRouter. См .: github.com/ReactTraining/react-router/blob/master/packages/…

Michael Curry 24.08.2018 10:07

@MichaelCurry Этот тестовый пример прошел, потому что я передал один объект в props. Мне было интереснее получить реквизиты этого тестового компонента. Это какое-то отношение к этому?

Mustkeem K 24.08.2018 10:34
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
3 117
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
const wrapper = mount(<MyComponent foo = {10} />);
expect(wrapper.props().children).to.equal(10);

Обновлено:

И, как указал @Must keem, это также работает:

const wrapper = mount(<MyComponent foo = {10} />);
expect(wrapper.instance().props.foo).to.equal(10);

@Moyoto Я добавил туда код компонента. Я использую jestjs для ожидания здесь. Итак .to.equal (10) становится .toEqual (10)

Mustkeem K 24.08.2018 14:18

Хм для меня это кажется правильным ... Что он печатает, если вы console.info (wrapper.props ()) или console.info (wrapper.debug ()) или console.info (wrapper.dive (). Debug () )

Moyote 24.08.2018 14:50

Как бы то ни было, я получил props с помощью wrapper.instance (). Props. Я думал, что работать должен только wrapper.props (). Есть ли причина, по которой wrapper.props () не предоставляет реквизиты.

Mustkeem K 27.08.2018 08:04

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