У меня есть компонент поискового фильтра с входом внутри, и он подключен к redux.
class SearchFilter extends PureComponent {
constructor (props) {
super(props);
this.handleInputChange = this.handleInputChange.bind(this);
this.state = {
keyword: props.searchKeyword
};
}
handleInputChange (e) {
this.setState({keyword: e.target.value});
this.props.dispatch(SetFiltersValue(...);
}
render () {
const {keyword} = this.state;
return (
<div className="search-w bp3-input-group">
<span className="bp3-icon bp3-icon-search"/>
<input className="bp3-input" value={keyword} type="text" placeholder="Search input" dir="auto" onChange={this.handleInputChange} />
</div>
);
}
}
const mapStateToProps = (_, ownParams) => {...};
export default connect(mapStateToProps)(SearchFilter);
Я написал тест в jest и энзим для проверки обновлений состояния, когда пользователь вводит новое значение
import React from "react";
import SearchFilter from "../../dev/components/shared/searchFilter";
import {shallow, mount} from "enzyme";
import configureStore from "redux-mock-store";
describe("Testing Search filter", () => {
const mockStore = configureStore(),
initialStoreState = {
filtersParams: {}
};
let store;
beforeEach(() => {
store = mockStore(initialStoreState);
});
it("Update search field value when user enters a value", () => {
const wrapper = shallow(<SearchFilter store={store}/>).dive(),
searchInput = wrapper.find("input.bp3-input").first();
expect(searchInput).toBeDefined();
const mockedEvent = {
preventDefault () {},
target: { value: "foo" }
};
expect(wrapper.state("keyword")).toEqual("");
searchInput.simulate("change", mockedEvent);
wrapper.update();
expect(wrapper.state("keyword")).toEqual("foo");
});
});
Проблема в том, что состояние не обновляется после имитации изменений, а проверка всегда завершается неудачей.
Как это исправить или есть другой способ проверить обновления состояния?