5

我正在使用 jest 并react-testing-library为我的应用程序提供单元测试覆盖率。

我使用了 Kent C. Dodds 在他的一个视频中展示的这个方便的辅助函数：

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。我希望能够至少模拟要传递的数据，但使用道具没有任何运气，因为商店优先。

希望任何人都可以提供帮助或分享一些指导。提前致谢！

4

2 回答 2

3

来自官方的Writing Tests文档Redux推荐了这种方法：

但有时您只想测试组件的渲染，而不需要 Redux 存储。

为了能够在不处理装饰器的情况下测试...组件本身，我们建议您也导出未装饰的组件

换句话说...导出NavBar为命名导出，以便您可以在测试中访问它。

然后，您可以直接将其作为一个简单的 UI 组件进行测试，该组件仅根据props您提供的内容进行呈现。

于 2019-03-27T01:43:58.190 回答
1

我创建了一个辅助函数来用 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})
于 2019-03-26T23:31:29.583 回答