Реактивное тестирование - Как я могу смоделировать или внедрить данные в хранилище, которые будут предоставлены в качестве реквизита для компонента - PullRequest
Новая
       8

Реактивное тестирование - Как я могу смоделировать или внедрить данные в хранилище, которые будут предоставлены в качестве реквизита для компонента

4 голосов
/ 27 марта 2019

Я использую jest и react-testing-library, чтобы обеспечить покрытие модульного теста для моего приложения.

Я использую эту удобную вспомогательную функцию, которую Кент С. Доддс показал в одном из своих видеороликов: 

const renderWithRedux = ui => ({
    ...render(<Provider store={store}>{ui}</Provider>),
    store,
});

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

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

это мой тест: 

test('navbar accepts props', async () => {
    /**
     * Something I was testing
     */
    const functionToTest = () => async dispatch => {
        dispatch(fetchTickets());
    };

    functionToTest();
    const isReady = true;
    const mockData = {
        sessionInformation: {
            ticket: { label: 'Total Tickets' },
            sessionDuration: { sessionLabel: 'Session Duration', duration: 42 },
            equipment: { type: 'Desktop', operatingSystem: 'Windows' },
        },
        component: { isReady },
        tickets: {
            ticketPayload: [
                {
                    number: '1020312039',
                    shortDescription: 'Accessories',
                    status: 'Active',
                    createdOnEpoch: 1512322200000,
                },
            ],
        },
    };

    const data = renderWithRedux(<Navbar props={mockData} />);
});

Компонент, который я тестирую: 

const NavBar = ({
    openTickets: { label },
    sessionDuration: { sessionLabel, duration },
    tickets: { ticketPayload = [] },
    isReady,
}) => (!isReady ? (
    <Container>
        <LogoContainer>
            <Logo src={logo} alt="logo" />
            <Header>Service Desk</Header>
        </LogoContainer>

        <SessionInformation className="session">
            <NavbarInfo className="session-info">
                <p>
                    <FontAwesomeIcon icon="ticket-alt" className="ticketIcon" />
                    {label}
                </p>
                <p>{`${ticketPayload.length} tickets`}</p>
            </NavbarInfo>
            <NavbarInfo last className="session-info">
                <p>
                    <FontAwesomeIcon icon="clock" className="ticketIcon" />
                    {sessionLabel}
                </p>
                <p>{`${duration} minutes`}</p>
            </NavbarInfo>
            {hasTokens() && (
                <Button type="submit" onClick={() => console.log('notes')}>
                        Notepad
                </Button>
            )}
        </SessionInformation>
    </Container>
) : (
    <LoaderContainer>
        <RingLoader size={100} />
    </LoaderContainer>
));

Мне нужно сделать расчеты длины с ticketPayload однако главный магазин имеет приоритет.Поскольку эта информация не была получена, ticketPayload имеет значение 0. Я хочу иметь возможность, по крайней мере, смоделировать передаваемые данные, но мне не повезло с использованием реквизита, поскольку хранилище имеет приоритет.

Надеюсь, что кто-нибудь может излучать свет помощи или поделиться некоторыми наставлениями.Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 27 марта 2019

Официальные Письменные тесты Документ от Redux рекомендует такой подход:

Но иногда вы хотите протестировать только рендеринг компонента без хранилища Redux.

Чтобы иметь возможность проверить сам компонент ... без необходимости иметь дело с декоратором, мы рекомендуем вам также экспортировать недекорированный компонент

Другими словами ...экспортируйте NavBar как с именем export , чтобы вы могли получить к нему доступ в своих тестах.

Затем вы можете протестировать его непосредственно как простой компонент пользовательского интерфейса, который просто отображает на основе props, который выдай это.

1 голос
/ 27 марта 2019

Я создал вспомогательную функцию для обертывания моих компонентов с помощью приставки. 

import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import initialState from '../store/initialState';

const mockStore = (state = initialState) => configureMockStore()(state);

export const testableComponent = (component, state) =>
  (<Provider store={mockStore(state)}>{component}</Provider>);

И затем вы можете вызывать ее так, передавая ваше состояние 

testableComponent(<YourComponent />, {yourUpdatedMockedState})
...