Reactテスト-コンポーネントの小道具として提供されるデータをストアにモックまたは挿入するにはどうすればよいですか?

aromanarguello

私はjestを使用してreact-testing-libraryおり、アプリの単体テストカバレッジを提供しています。

私はこの便利なヘルパー関数KentC.Doddsが彼のビデオの1つで示したものを使用します。

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'sは0です。渡されるデータを少なくともモックできるようにしたいのですが、ストアが優先されるため、小道具を使用することはできませんでした。

誰かが助けの光を放つか、いくつかのガイダンスを共有できることを願っています。前もって感謝します!

アレクサンドルザヴァリー

コンポーネントをreduxでラップするヘルパー関数を作成しました。

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})

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ