javascript - mock - Violación Invariant de ReactJs/Redux: No se pudo encontrar "store" en el contexto o en los accesorios de "Connect(LoginContainer)"

mock redux jest

Question

No estoy seguro de por qué estoy recibiendo este error, sucedió cuando agregué connect from redux a mi componente de inicio de sesión, para poder conectar mi store .

FAIL src / components / auth / Login.test.js

● El paquete de prueba no se ejecutó

Violación invariante: no se pudo encontrar "almacenar" ni en el contexto ni en los accesorios de "Connect (LoginContainer)". Envuelva el componente raíz en un <Provider> , o explícitamente pase "almacenar" como apoyo a "Conectar (LoginContainer)".

Index.js

import React from ''react''
import ReactDOM from ''react-dom''
import { Provider } from "react-redux"
import { createCommonStore } from "./store";
import App from ''./App''
import css from ''./manage2.scss''
const store = createCommonStore();
const element = document.getElementById(''manage2'');
console.log("Index.js Default store", store.getState());
ReactDOM.render(
<Provider store={store}> // <-- store added here
<App />
</Provider>, element);

store.js

import React from "react"
import { applyMiddleware, combineReducers, compose, createStore} from "redux"
import thunk from "redux-thunk"
import { userReducer } from "./reducers/UserReducer"
import { authReducer } from "./reducers/AuthReducer"
export const createCommonStore = (trackStore=false) => {
const reducers = combineReducers({
user: userReducer,
user: authReducer
});
//noinspection JSUnresolvedVariable
const store = createStore(reducers,
compose(
applyMiddleware(thunk),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
);
if (trackStore) {
store.subscribe((() => {
console.log(" store changed", store.getState());
}));
}
return store;
};

App.js

import React from ''react''
import { BrowserRouter as Router } from ''react-router-dom''
import Routes from ''./components/Routes''
const supportsHistory = "pushState" in window.history
export default class App extends React.Component {
render() {
return (
<Router forceRefresh={!supportsHistory}>
<Routes />
</Router>
);
}
}

Routes.js

import React from ''react''
import { Route, Switch } from ''react-router-dom''
import LoginContainer from ''./auth/Login''
import Dashboard from ''./Dashboard''
import NoMatch from ''./NoMatch''
const Routes = () => {
return (
<Switch>
<Route exact={ true } path="/" component={ LoginContainer }/>
<Route path="/dashboard" component={ Dashboard }/>
<Route component={ NoMatch } />
</Switch>
);
}
export default Routes

Finalmente Login.js (código eliminado por brevedad

import React from ''react''
import { connect } from "react-redux"
import { bindActionCreators } from ''redux'';
import { setCurrentUser } from ''../../actions/authActions''
import * as api from ''../../services/api''
const mapDispatchToProps = (dispatch) => {
console.log(''mapDispatchToProps'', dispatch);
return {
setUser: (user) => {
bindActionCreators(setCurrentUser(user), dispatch)
}
}
}
class LoginContainer extends React.Component {
constructor(props) {
super(props)
this.state = {};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e) {
}
handleSubmit(e) {
}
render() {
return (
<div className="app-bg">
...
</div>
)
}
}
export default connect(null, mapDispatchToProps)(LoginContainer); 

Login.test

import React from ''react''
import ReactTestUtils from ''react-dom/test-utils''
import { mount, shallow } from ''enzyme''
import toJson from ''enzyme-to-json''
import { missingLogin } from ''../../consts/errors''
import Login from ''./Login''
import Notification from ''../common/Notification''
const loginComponent = shallow(<Login />);
const fakeEvent = { preventDefault: () => '''' };
describe(''<Login /> component'', () => {
it(''should render'', () => {
const tree = toJson(loginComponent);
expect(tree).toMatchSnapshot();
});
it(''should render the Notification component if state.error is true'', () => {
loginComponent.setState({ error: true });
expect(loginComponent.find(Notification).length).toBe(1);
});
});
describe(''User Login'', () => {
it(''should fail if no credentials are provided'', () => {
expect(loginComponent.find(''.form-login'').length).toBe(1);
loginComponent.find(''.form-login'').simulate(''submit'', fakeEvent);
expect(loginComponent.find(Notification).length).toBe(1);
const notificationComponent = shallow(<Notification message={ missingLogin }/>);
expect(notificationComponent.text()).toEqual(''Please fill out both username and password.'');
});
it(''input fields should be filled correctly'', () => {
const credentials = { username: ''leongaban'', password: ''testpass'' };
expect(loginComponent.find(''#input-auth-username'').length).toBe(1);
const usernameInput = loginComponent.find(''#input-auth-username'');
usernameInput.value = credentials.username;
expect(usernameInput.value).toBe(''leongaban'');
const passwordInput = loginComponent.find(''#input-auth-password'');
passwordInput.value = credentials.password;
expect(passwordInput.value).toBe(''testpass'');
});
});

¿Qué ves mal aquí?

Answer 1

Necesita pasar la tienda como un accesorio o contexto en su prueba. el método mount acepta el contexto como otro parámetro.

y ¿cómo se consigue la tienda aquí? Usted crea la tienda de la misma manera que creó en app.js

Answer 2

Puede usar el contextType de React o pasar propType. Debería declararlo ya sea como prop o contextType.

Provider.contextTypes = {
Store: React.PropTypes.object.isRequired
};
Provider.propTypes= {
Store: React.PropTypes.object.isRequired
};

Answer 3

Redux recomienda exportar el componente desconectado para pruebas unitarias. Ver sus documentos .

En login.js:

// Named export for tests
export class LoginContainer extends React.Component {
}
// Default export
export default connect(null, mapDispatchToProps)(LoginContainer); 

Y en tu prueba:

// Import the named export, which has not gone through the connect function
import { LoginContainer as Login } from ''./Login'';

A continuación, puede especificar cualquier accesorio que habría venido de la tienda directamente en el componente.