TypeError: dispatch nie jest funkcją podczas testowania z reaktywną-tworzeniem-aplikacją i enzymem - reactjs, redux, react-redux, jestjs, enzym

Próbuję skonfigurować testowanie nowego projektustworzony za pomocą aplikacji reaguj-utwórz. Który teraz wydaje się korzystać z React 16 i Jest 3 (które podobno miały jakieś przełomowe zmiany, a może to było enzime). Mam błąd podobny do tego posta TypeError: dispatch nie jest funkcją, gdy próbuję przetestować metodę za pomocą JEST

Błąd typu: wysyłanie nie jest funkcją at 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);
});
});

Pierwotnie próbowałem to zrobić:

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

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


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

Który rzucił ten błąd

Naruszenie niezmiennika: nie można znaleźć „sklepu” w kontekście ani w rekordzie „Połącz (formularz (SearchForm))”. Zawijaj komponent root w a lub jawnie przekaż „store” jako rekwizyt

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

Odpowiedzi:

Nie należy eksportować komponentu prezentacyjnego (jako nazwanego eksportu) i komponentu kontenera (jako domyślnego eksportu) do App.js. Następnie w testach importujesz i korzystasz z komponentu prezentacyjnego, używając:

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

ale zamiast tego należy zaimportować podłączony komponent kontenera, używając:

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

Odkąd używasz komponentu, który nie jest podłączony do sklepu Redux dispatch rekwizyt nie jest wtryskiwany jako rekwizyt. Po prostu użyj poprawnego importu i powinien działać.
Aby uzyskać więcej informacji na temat importowania domyślnych i nazwanych eksportów, sprawdź to doc. O komponentach prezentacyjnych i kontenerowych możesz przeczytać tutaj.