Skahrz Skahrz - 2 months ago 28
React JSX Question

ReduxForm needs store to be pass as props on tests

I m trying to make some unit tests using ReduxForm and I m clearly having problems with the simplest ones like this one.

Actually, I have a searchbar, and when I modify its input, I need the state to reflect that data.

I've written this tests :

beforeEach(() => {
const store = configureStore()({
searchBar:{
inputField:''
}
});
searchBar = TestUtils.renderIntoDocument(<SearchBar store={store}/>);
});

it('should have a form Field tag', () => {
const input = TestUtils.findRenderedComponentWithType(searchBar, Field);
expect(input).toBeTruthy();
});


That should test this :

import React from 'react';
import { Field, reduxForm } from 'redux-form';
/**
* The seach bar component class definition
*/
class SearchBar extends React.Component {
/**
* Render the searchBar component
*/
render() {
return (
<form>
<Field name="inputField" component="input" type="text"/>
<button type="submit">Rechercher</button>
</form>
);
}
}

/**
* Decorate the form
*/
SearchBar = reduxForm({
form: 'searchBar'
})(SearchBar);

export default SearchBar;


But I've the following error thrown :

Invariant Violation: Could not find "store" in either the context or props of "Connect(ConnectedField)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(ConnectedField)". in src/index.spec.js (line 3551)


Even if I pass it the props in my component ... (see the beforeEach call)

Any ideas ?

Answer

For testing redux-form you need to have a redux store and a provider.

try something like this :

searchBar = TestUtils.renderIntoDocument(<Provider store={store}><SearchBar /></Provider>);