Как проверить реагирующий компонент, содержащий вложенные компоненты, которые являются связанными компонентами, с использованием response-test-renderer и jest? - PullRequest
Новая
       8

Как проверить реагирующий компонент, содержащий вложенные компоненты, которые являются связанными компонентами, с использованием response-test-renderer и jest?

0 голосов
/ 09 января 2019

На самом деле, я использую реагировать-тест-рендеринг и Jest для написания тестовых случаев в реагировать-нативный? У меня есть компонент, который мне нужно проверить, и этот компонент содержит вложенные компоненты, которые являются связанными компонентами. Ниже приведен код, который я написал для тестирования компонента: 

import React from 'react';
import renderer from 'react-test-renderer';
import sinon from 'sinon';
import { clone } from 'lodash';
import { ProfileImageSelect } from 
'../../../../components/settings/ProfileImageSelect';

const userInfo = {
    first_name: 'test_first_name',
    last_name: 'test_last_name'
};

describe('<ProfileImageSelect />', () => {
    let onClose;
    let onSelect;
    let socialLogins;

    beforeEach(() => {
        socialLogins = {
            facebook: {
                id: '187416164',
                identifier: 'adams_facebook',
                full_name: 'Eric Adams',
                profile_pic: 'profile_pic_facebook.jpeg',
                expired: false
            },
            twitter: {
                full_name: 'Eric Adams',
                id: '187416164',
                identifier: 'adams_ea',
                profile_pic: 'https://pbs.twimg.com/profile_images/707586445427380226/5uETA8fs.jpg',
                expired: false
            },
            linkedin: {
                full_name: 'Eric Adams',
                id: '8vN6Da_RJJ',
                identifier: 'adams.ea@gmail.com',
                profile_pic:
                    'https://media.licdn.com/dms/image/C5603AQFfn5Ko5IS1NQ/profile-displayphoto-shrink_100_100/0?e=1549497600&v=beta&t=11m5mirEr_R2gf3OOfh3zHTL3Xe2ImrxcZ7l7ebLDa0',
                expired: false
            }
        };
        onClose = sinon.stub();
        onSelect = sinon.stub();
    });

    it('calls onClose on the props on click of cancel link ', () => {
        const connected = clone(socialLogins, true);
        const testRenderer = renderer.create(
            <ProfileImageSelect
                onSelect={onSelect}
                onClose={onClose}
                socialLogins={connected}
                userInfo={userInfo}
            />
        );
        const root = testRenderer.root;
        root.findByProps({ className: 'cancel' }).props.onPress();
        expect(onClose.called).toEqual(true);
    });
});

Но это показывает мне ошибку, говорящую:

Инвариантное нарушение: не удалось найти «хранилище» ни в контексте, ни в подпунктах «Connect (SocialServiceProfileImage)». Либо оберните корневой компонент в, либо явно передайте «store» в качестве реквизита «Connect (SocialServiceProfileImage)».

Я знаю, что могу использовать 'response-test-renderer / shallow' для поверхностного рендеринга, но он не позволяет мне найти какой-либо узел в DOM, как это делает Enzyme. Кто-нибудь может мне с этим помочь?. У меня нет энзима, и я не хочу использовать его для реакции-редукса-mock-store.

Ответы [ 2 ]

0 голосов
/ 28 января 2019

Вы можете добавить дополнительный экспорт по умолчанию для

ProfileImageSelect (класс), который не подключен, и импортировать его по умолчанию: 

import  ProfileImageSelect  from 
'../../../../components/settings/ProfileImageSelect';

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

0 голосов
/ 28 января 2019

Вы можете определить фиктивное хранилище вручную и передать его как опору компоненту. К сожалению, он работает только с указанным компонентом, если вы хотите углубиться, вы должны использовать redux-mock-store или написать свой собственный поставщик контекста.

...