Estoy tratando de practicar el uso de Redux/probando React, y tengo una aplicación simple configurada con el kit Create-React de Facebook .
Tengo una prueba básica que se supone que debe asegurarse de que un elemento se represente:
it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render( < Companies / > , div); });Iba pasando hasta que implementé Redux en ese elemento, así:
function select(state) { return {companies: state}; } export default connect(select)(Companies);Ahora, a pesar de que el elemento ciertamente se muestra en el navegador y la implementación de redux funciona bien, recibo este mensaje en los resultados de la prueba:
Invariant Violation: Could not find "store" in either the context or props of "Connect(Companies)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Companies)".Pensé que había hecho esto en mis rutas con esto:
let store = createStore(companyApp); ReactDOM.render( <Provider store={store}> <Router history={browserHistory}> <Route path="/" component={App}> <Route path="/companies" component={Companies}> <Route path=":id" component={Company}/> </Route> < /Route> </Router> </Provider>, document.getElementById('root'));pero debo estar perdiendo algo.
Esto sucede porque el componente Companies es un componente conectado. Cuando intenta representar el componente conectado en la prueba, le advierte que no hay ninguna tienda presente. Para resolver esto, puede envolver el componente Companies en un Provider con una tienda creada específicamente para la prueba o, si solo desea probar la representación del componente sin preocuparse por la tienda redux, puede exportar explícitamente el componente sin formato así :
export class Companies { ... } export default connect(select)(Companies);y en tu prueba
import { Companies } from ./Companies it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render( < Companies companies={[]} / > , div); });La prueba de componentes conectados se describe con más detalle aquí http://redux.js.org/docs/recipes/WritingTests.html#connected-components