首页 文章

JestJS - >不变违规：无法在“连接（投资组合）”的上下文或道具中找到“存储”

提问于
浏览 次
5

完整的错误消息：

不变违规：无法在“连接（投资组合）”的上下文或道具中找到“存储” . 将根组件包装在a中，或者将“store”显式传递为“Connect（Portfolio）”的prop .

我不确定为什么我在我的Jest测试中收到此错误，因为我的应用程序正在运行，我可以通过调度操作更改我的状态 .

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, applyMiddleware, compose } from 'redux'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import reducer from './reducer'
import App from './App'

const element = document.getElementById('coinhover');

const store = createStore(reducer, compose(
    applyMiddleware(thunk),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
));

ReactDOM.render(
    <Provider store={ store }>
        <App />
    </Provider>, element);

投资组合部分

import React from 'react'
import { connect } from 'react-redux'
import SocialMediaFooter from '../common/SocialMediaFooter'
import AssetsTable from '../assetsTable/AssetsTable'
import local_coins from '../../coins.json'
import * as api from '../../services/api'

const mapStateToProps = ({ portfolio }) => ({
    portfolio
});

let localCoins = local_coins;

class Portfolio extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            loading: true,
            assets: props.portfolio,
            total: 0
        };
    }

    componentDidMount() {
        this.setState({ loading: false });
    }

    render() {
        const assets = this.state.assets;
        const total  = this.state.total;

        return (
            <div className="app-bg">
                <section className="portfolio">
                    <header>
                        <h1><span className="plus">+</span>COINHOVER</h1>
                        <h2>Watch your cryptocurrency asset balances in once place.</h2>
                        <em className="num">${ total }</em>
                    </header>
                    { this.state.loading ? (
                        <div className="loading">
                            <div className="loader"></div>
                            <span>Loading coin data...</span>
                        </div>
                    ) : (
                        <AssetsTable assets={ assets }/>
                    )}
                    <SocialMediaFooter />
                </section>
            </div>
        )
    }
}

export default connect(mapStateToProps, null)(Portfolio)
reactjs redux react-redux jestjs enzyme

2 回答

  • 2

    根据错误消息，您需要确保连接组件的测试可以实际访问商店实例 . 因此，在测试代码中，您还应该使用 <Provider store={store}><ConnectedPortfolio /></Provider> 或 <ConnectedPortfolio store={store} /> . 或者，您可以单独导出普通 Portfolio 组件，并测试该组件，而不是连接的版本 .

    有关详细信息，请参阅Redux docs on testing，以及React/Redux links list中Redux testing approaches上的文章 .

    回复于
  • 4

    我遇到了同样的问题，这是我如何解决它：正如还原的官方docs建议，更好地导出未连接的组件 .

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

    import { connect } from 'react-redux'

    // Use named export for unconnected component (for tests)
export class App extends Component { /* ... */ }
 
// Use default export for the connected component (for app)
export default connect(mapStateToProps)(App)

    由于默认导出仍然是装饰组件，因此上图所示的import语句将像以前一样工作，因此您不必更改应用程序代码 . 但是，您现在可以在测试文件中导入未修饰的App组件，如下所示：

    // Note the curly braces: grab the named export instead of default export
import { App } from './App'

    如果你需要两个：

    import ConnectedApp, { App } from './App'

    在应用程序本身中，您仍然可以正常导入它：

    import App from './App'

    您只能使用命名导出进行测试 .

    回复于

相关问题