У меня есть страница с компонентом, который ищет данные запроса от конечной точки GET
, когда происходит событие щелчка:
AppView.jsx
/**
* Request and set a list of test values
* @param {Object} params The response of the search component
*/
fetchData = (params) => {
const { search } = params;
this.props.api.test(search)
.then((response) => {
objectOrder(response, 'dueDate');
this.setState({ test: response });
}).catch(() => {
this.setState({ test: [] });
});
}
render() {
return (
<SearchComponent fetchData={this.fetchData} />
);
}
SearchForm / index.jsx
class SearchForm extends Component {
static propTypes = {
fetchData: PropTypes.func.isRequired,
}
constructor(props) {
super(props);
this.state = {
search: '',
};
}
/**
* Sets the state of the search name
* @param {Object} event
*/
handleChange = (event) => {
const { name, value } = event.target;
this.setState({ [name]: value });
}
/**
* Propagate the submit event
* @param {Object} event
*/
handleSubmit = (event) => {
event.preventDefault();
this.props.fetchData(this.state);
}
render() {
return (
<FormContainer onSubmit={this.handleSubmit}>
<Input value={this.state.search} name='search' placeholder='Search for...' onChange={this.handleChange} />
<Button variant='contained' color='primary'>Buscar</Button>
</FormContainer>
);
}
}
Когда я выполняю SearchForm
тест метода отправки, даже если все мои тесты пройдены успешно, мое покрытие показывает, что handleSubmit
и handleChange
методы вообще не тестируются:
![enter image description here](https://i.stack.imgur.com/nVkie.png)
Мой тест пытается проверить этот метод следующим образом:
describe('<SearchForm />', () => {
const text = 'This is a text for a test';
const state = { search: text };
let props;
let wrapper;
beforeEach(() => {
props = {
handleSubmit: jest.fn(() => true),
fetchData: jest.fn(() => (state)),
};
wrapper = mount(<SearchForm {...props} />);
});
test('It should call handlesubmit method when submitting the form', (done) => {
wrapper.find(Button).simulate('click', { preventDefault() {} });
expect(wrapper.props().handleSubmit()).toEqual(true);
done();
});
test('It should call handleChange method', (done) => {
const input = wrapper.find(Input);
input.props().value = text;
input.simulate('change', { target: { value: text } });
expect(input.get(0).props.value).toEqual(text);
done();
});
});
Любая помощь, чтобы покрыть все эти методы?
Спасибо в совете