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

Posted 2023-02-19

【中文标题】JestJS -> 不变违规：在“连接（投资组合）”的上下文或道具中找不到“商店”

【英文标题】：JestJS -> Invariant Violation: Could not find "store" in either the context or props of "Connect(Portfolio)"

【发布时间】：2017-12-02 10:41:14

【问题描述】：

完整的错误信息：

不变违规：在“连接（投资组合）”的上下文或道具中找不到“商店”。要么将根组件包装在 a 中，要么将“store”作为道具显式传递给“Connect(Portfolio)”。

不知道为什么我的 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)

【参考方案1】：

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

请参阅Redux docs on testing 了解更多信息，以及我的React/Redux links list 中有关Redux testing approaches 的文章。

【讨论】：

啊，谢谢！就是这样 :D 我按照你说的做了，只是做了一个新的 const 来导出，然后再次导出类，然后在我的测试中：import Portfolio from './Portfolio'

【参考方案2】：

我遇到了同样的问题，我是这样解决的： 正如redux官方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)

由于默认导出仍然是装饰组件，因此上图中的导入语句将像以前一样工作，因此您不必更改应用程序代码。但是，您现在可以像这样在测试文件中导入未修饰的 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'

您只能将命名导出用于测试。