JestJS ->不变违规:找不到“商店"在“Connect(Portfolio)"的上下文或道具中； [英] JestJS -> Invariant Violation: Could not find "store" in either the context or props of "Connect(Portfolio)"

问题描述

完整的错误信息:

<块引用>

不变违规:无法在Connect(Portfolio)"的上下文或道具中找到store".要么将根组件包装在 a 中，要么将store"作为道具显式传递给Connect(Portfolio)".

不知道为什么在我的 Jest 测试中出现此错误，因为我的应用正在运行，我可以通过调度操作更改我的状态.

index.js

从 'react' 导入 React从'react-dom' 导入 ReactDOMimport { createStore, applyMiddleware, compose } from 'redux'从'react-redux'导入{提供者}从redux-thunk"导入 thunk从'./reducer'导入reducer从'./App'导入应用程序const element = document.getElementById('coinhover');const store = createStore(reducer, compose(应用中间件(thunk)，window.__REDUX_DEVTOOLS_EXTENSION__ &&window.__REDUX_DEVTOOLS_EXTENSION__()));ReactDOM.render(<提供者商店={商店}><应用程序/></Provider>, 元素);

投资组合组件

从 'react' 导入 React从'react-redux'导入{连接}从'../common/SocialMediaFooter' 导入 SocialMediaFooter从 '../assetsTable/AssetsTable' 导入 AssetsTable从'../../coins.json'导入local_coins从 '../../services/api' 导入 * 作为 apiconst mapStateToProps = ({投资组合}) =>({文件夹});让 localCoins = local_coins;class Portfolio 扩展 React.Component {构造函数(道具){超级(道具)this.state = {加载:真实，资产:props.portfolio，总计:0};}componentDidMount() {this.setState({loading: false });}使成为() {const 资产 = this.state.assets;const total = this.state.total;返回 (<div className="app-bg"><section className="投资组合"><标题><h1><span className="plus">+</span>COINHOVER</h1><h2>一次性查看您的加密货币资产余额.</h2><em className="num">${ total }</em></标题>{ this.state.loading ?(<div className="加载中"><div className="loader"></div><span>正在加载硬币数据...</span>

) : (<AssetsTable assets={ assets }/>)}<SocialMediaFooter/></节>

)}}导出默认连接(mapStateToProps，null)(投资组合)

解决方案

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

查看 Redux 测试文档了解更多信息，以及有关 Redux 测试方法的文章在我的 React/Redux 链接列表中.

The full error message:

Invariant Violation: Could not find "store" in either the context or props of "Connect(Portfolio)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(Portfolio)".

Not sure why I'm getting this error in my Jest tests as my app is working and I can change my state with dispatch actions.

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

Portfolio component

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)

解决方案

Per the error message, you need to make sure that tests for a connected component can actually access a store instance. So, in your test code, you should also use <Provider store={store}><ConnectedPortfolio /></Provider>, or <ConnectedPortfolio store={store} />. Or, you can export your plain Portfolio component separately, and test that, not the connected version.

See the Redux docs on testing for more info, as well as the articles on Redux testing approaches in my React/Redux links list.

这篇关于JestJS ->不变违规:找不到“商店"在“Connect(Portfolio)"的上下文或道具中；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！