TypeError: dispatch non è una funzione durante il test con react-create-app jest ed enzima - reactjs, redux, react-redux, jestjs, enzyme

Sto cercando di impostare i test su un nuovo progettocreato con react-create-app. Che ora sembra usare React 16 e Jest 3 (che presumibilmente aveva alcuni cambiamenti di rottura, o forse era un enzima). Ricevo un errore simile a questo post TypeError: dispatch non è una funzione quando provo a testare un metodo usando JEST

TypeError: dispatch non è una funzione su App.componentDidMount (src / components / App.js: 21: 68)

import React from "react";
import { Provider } from "react-redux";
import { mount } from "enzyme";

import { App } from "../components/App";
import configureStore from "../state/store/configureStore";

window.store = configureStore({
slider: {
mainImageIndex: 0,
pageNum: 1,
perPage: 4,
},
});

const appTest = (
<Provider store={window.store}>
<App />
</Provider>
);

describe("App", () => {
it("should render without crashing", () => {
mount(appTest);
});
});

Inizialmente ho provato a farlo:

import React from "react";
import { mount } from "enzyme";

import { App } from "../components/App";


describe("App", () => {
it("should render without crashing", () => {
mount(<App />);
});
});

Che ha gettato questo errore

Violazione invariabile: impossibile trovare "archivio" nel contesto o negli oggetti di scena di "Connect (Form (SearchForm))". O avvolgere il componente root in a, o passare esplicitamente "store" come supporto

Codice per app.js:

import React, { Component } from "react";
import { connect } from "react-redux";
import { searchPhotos } from "../state/actions/searchPhotos";
import { setMainImageIndex, setFirstPage } from "../state/actions/slider";
import Slider from "./Slider";
import SearchForm from "./SearchForm";
import Error from "./Error";
import "../styles/App.css";

export class App extends Component {
componentDidMount() {
const { dispatch } = this.props;
dispatch(searchPhotos(window.store));
}

searchPhotosSubmit = () => {
const { dispatch } = this.props;
dispatch(setFirstPage());
dispatch(setMainImageIndex(0));
dispatch(searchPhotos(window.store));
}

render() {
const { fetchError } = this.props;
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Flickr Slider in React.js</h1>
<SearchForm onSubmit={this.searchPhotosSubmit} />
</header>
{!fetchError ? <Slider /> : <Error />}
</div>
);
}
}

export default connect(state => ({
fetchError: state.fetchError,
form: state.form,
slider: state.slider,
}))(App);

risposte:

Si prega di non esportare sia il componente di presentazione (come esportazione denominata) che il componente contenitore (come esportazione predefinita) in App.js. Quindi nei test si importa e si utilizza il componente di presentazione utilizzando:

import { App } from "../components/App";

ma dovresti importare il componente contenitore connesso utilizzando invece:

 import App from "../components/App"; // IMPORTANT! - no braces around `App`

Dal momento che stai usando un componente che non è collegato all'archivio Redux dispatch il puntello non viene iniettato come sostegno. Basta usare l'importazione corretta e dovrebbe funzionare.
Per maggiori dettagli sull'importazione delle esportazioni predefinite e denominate, si prega di controllare questo doc. Informazioni sui componenti di presentazione e container che puoi leggere Qui.