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

Question

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

import React from 'react';
import { shallow, mount } from 'enzyme';
import renderer from 'react-test-renderer';
import { MemoryRouter } from 'react-router';

import ListComponent from '.';

const listOfLinks = [
    { url: '/one', text: 'Link one', internal: false },
    { url: '/two', text: 'Link two', internal: false },
    { url: '/datasets', text: 'Datasets', internal: true }
];

const itemsToDisplay = 4;

const props = {
    listOfLinks, itemsToDisplay
};

describe('list-Component', () => {
    it('Check if rendered list size is same as passed', () => {
        const wrapper = mount(<MemoryRouter><ListComponent {...props} /></MemoryRouter>);
        expect(wrapper.props().listOfLinks.length).toEqual(3);
    });
});

, но я получаю ожидаемое 3 получено:не определено

Answer 1

Ваша обертка здесь MemoryRouter, а не ListComponent. У MemoryRouter нет реквизита.

Если вы хотите проверить реквизиты, переданные ListComponent, вы можете сделать это следующим образом:

wrapper.find(ListComponent).props() 

Однако, как в стороне ... что бы вы тестировали, если бы сделали это? В этом случае может случиться так, что ваш тест правильно предоставил ожидаемый реквизит, но не о самом компоненте. Проверка реквизита, подобного этой, проверяет детали реализации, когда вас интересует выводимый результат. Лучше сами найти ссылки в обертке, а затем сосчитать их.

eta: Если компонент был обновлен, чтобы принимать разные реквизиты (но с тем же результатом рендеринга), тогда ваш тест не пройден, даже если приложение все еще работает должным образом. Если вы проверите обработанный вывод, тогда вы сможете рефакторинг и обновление, и ваши тесты будут провалены только при сбое важного материала - то есть будет показано неправильное количество ссылок. Кент Си Доддс много пишет о подобных вещах - посмотрите его Библиотека тестирования реакции