無法持久存儲連接的組件-React-Redux測試

Question

我不知道為什么這不起作用：

-spec.js

it.only('passes props to children', () => {
    const state = {
        company: {
            name: 'Company A'
        }
    },
        store = fakeStore(state),
        container = <HomePageContainer store={store} />;

    const homePageContainer = shallow(container),
        homePage = homePageContainer.find(HomePage);

    expect(homePage.props.company.name).to.equal(state.company.name)
});

const fakeStore = state => {
    return {
        default: () => {},
        subscribe: () => {},
        dispatch: () => {},
        getState: () => { return { state };
        },
    };
};

HomePageContainer.js

import React from 'react';
import { connect } from 'react-redux'
import HomePage from '../../client/components/HomePage';

export const mapStateToProps = state => {
    company: state.company
}

export { HomePage }
export default connect(mapStateToProps)(HomePage);

HomePage.js

import React, { Component, PropTypes } from 'react';

export default class HomePage extends Component {
    render(){
        return (
            <div className='homepage'>
                {/*{this.props.company.name}*/}
            </div>
        )
    }
}

由於道具，我收到此類型錯誤。 公司未定義，因此由於某種原因它沒有保持狀態為：

TypeError: Cannot read property 'name' of undefined

該錯誤與嘗試讀取expect(homePage.props.company.name)時的斷言有關

我注意到，在mapStateToProps中放置一個斷點時，出於某種原因，它仍然沒有從存儲中拾取狀態對象：

我知道您可以通過props只通過商店...如果上下文中沒有任何內容，connect（）將能夠通過store prop來找到它。 例如，在另一個測試套件中，這可以通過：

it('shallow render container and dive into child', () => {
    const container = shallow(<ExampleContainer store={fakeStore({})}/>);

    expect(container.find(Example).dive().text()).to.equal('Andy');
});

Answer 1

問題

在這一行中，您將商店作為道具傳遞給<HomePageContainer> ：

// ...
container = <HomePageContainer store={store} />;
// ...

但是connect()需要通過上下文存儲。

並且必須將要返回的對象包裝在mapStateToProps中的括號中。

解

您可以使用shallow()使存儲作為上下文屬性可用。

it.only('passes props to children', () => {
    const state = {
        company: {
            name: 'Company A'
        }
    };
    const store = fakeStore(state);

    const homePageContainer = shallow(
        <HomePageContainer />,
        // Make the store available via context
        { context: { store } }
    );

    const homePage = homePageContainer.find(HomePage);
    expect(homePage.props().company.name).to.equal(state.company.name)
});

更新了mapStateToProps ：

export const mapStateToProps = state => ({
    company: state.company
});

Answer 2

發現問題確實是我的幫手。

這是在傳遞帶有屬性“狀態”的對象。 不是我想要的 那將意味着mapStateToProps將不得不使用state.state.somePropName引用道具。

const fakeStore = (state) => {
    return {
            default: () => {},
            subscribe: () => {},
            dispatch: () => {},
            getState: () => { return { state };
        },
    };
};

將其更改為此，現在mapStateToProps可以正常工作，它可以使用props作為對象文字的根級別（我從測試中傳入的對象）進行訪問：

const fakeStore =（狀態）=>（{

    default: () => {},
    subscribe: () => {},
    dispatch: () => {},
    getState: () => ({ ...state })
});