Javascript 反应测试-如何在存储中模拟或注入数据，以作为组件的道具提供

我正在使用jest和

react测试库

为我的应用程序提供单元测试覆盖率

我使用Kent C.Dodds在他的一个视频中展示的这个方便的助手功能：

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

const renderWithRedux=ui=>({
…呈现（{ui}），
商店，
});

我在测试连接的组件时使用

我遇到了一个问题，为了呈现一个组件，我需要获取一些数据来准确地解析测试，或者至少将模拟数据注入存储。我没有这样做

这是我的测试：

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

test（'navbar接受道具'，async（）=>{
/**
*我正在测试的东西
*/
const functionToTest=（）=>异步调度=>{
调度（fetchTickets（））；
};
函数测试（）；
const isReady=true；
常数mockData={
会议信息：{
票证：{标签：'总票证'}，
会话持续时间：{sessionLabel:'会话持续时间'，持续时间：42}，
设备：{type:'Desktop'，operatingSystem:'Windows'}，
},
组件：{isReady}，
门票：{
票证抬头：[
{
编号：“1020312039”，
简短描述：'附件'，
状态：“活动”，
createdOnEpoch:1512322200000，
},
],
},
};
const data=renderWithRedux（）；
});

我正在测试的组件：

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

const导航栏=({
openTickets:{label}，
会话持续时间：{sessionLabel，duration}，
票证：{ticketPayload=[]}，
我已经准备好了，
})=>（！我准备好了吗(
服务台

{label}

{`${ticketPayload.length}tickets`}


{sessionLabel}

{${duration}分钟`}

{hasTokens（）&&(
console.log（'notes'）}>
便条簿
)}
) : (
));

我需要使用

ticketPayload

进行长度计算，但主存优先。由于尚未获取该信息，

ticketPayload

的值为0。我希望能够至少模拟要传递的数据，但没有使用道具的运气，因为存储优先

---

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

我创建了一个helper函数，用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>);

从'react redux'导入{Provider}；
从“redux模拟存储”导入configureMockStore；
从“../store/initialState”导入initialState；
const mockStore=（state=initialState）=>configureMockStore（）（state）；
导出常量testableComponent=（组件，状态）=>
（{component}）；

然后你可以这样称呼它，通过你的州

testableComponent(<YourComponent />, {yourUpdatedMockedState})

testableComponent（，{yourUpdatedMockedState}）
Redux的官方文件建议采用以下方法：

但有时您只想测试组件的呈现，而不需要Redux存储

为了能够测试…组件本身而不必处理装饰程序，我们建议您也导出未装饰的组件

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

你可以直接测试它作为一个简单的UI组件，它只是根据<代码> PROPs<代码>你给出的。
首先要考虑的是，你通过道具传递给Navar的对象不是提供它需要的道具。例如，NavBar需要'isReady'属性，但您将其作为另一个对象的属性传递，component={isReady}:/n这并不能真正解决我的问题，因为这些道具似乎什么都没有做。因为Navbar连接到redux存储，所以它会优先接收存储的道具，这些道具在获取之前都是空数组。我需要它来获取模拟数据进行测试。希望这是有意义的@leosteffenI不是帮助解决redux细节的最佳人选，但我会让1）单独测试组件，而不是连接到redux，2）让fetchTickets（）函数自己测试。通过这种方式，你可以确保你的各个部件正常工作，直到你发现是否/如何一起测试它们。这是有意义的。我每一个都单独测试过。我分别用
redux mock stor
和reducer测试我的操作。。我想我想用组件lolI see模拟和测试端到端的体验，只是要确保您不会最终测试redux:p这也是完全有意义的！感谢分享：）如果你
从“/Component”导入{Component}不需要使用存储/提供程序包装。