Я использую jest и enzyme для модульного тестирования своего приложения React, и я борюсь с тестированием подключенных компонентов.
У меня есть простой компонент, который имеет следующую логику:
class LoginPage extends React.Component {
componentDidMount() {
if (!this.props.reduxReducer.appBootstrapped) {
this.props.dispatch(ReduxActions.fadeOutAndRemoveSplashScreen(500));
}
}
render() {
return (
<div data-page="login-page" >
<div>This is the login page.</div>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
reduxReducer: state.reduxReducer
}
};
export default connect(mapStateToProps, null)(LoginPage);
Итак, это компонент, который отображает элемент <div />, содержащий некоторый текст, но важная часть, которую я хочу протестировать, заключается в том, что при монтировании компонента отправляется действие для скрытия экрана-заставки. Я хочу, чтобы это происходило только тогда, когда приложение не загружается.
У меня есть простой модульный тест, чтобы проверить, отображается ли компонент:
describe("[LoginPage Component]", () => {
it("Renders without a problem.", () => {
// Act.
const wrapper = mount(
<LoginPage store={ reduxStore } />
);
// Assert.
expect(wrapper.find("div[data-page=\"login-page\"]").length).toBe(1);
});
});
Свойство reduxStore — это мой фактический редукционный магазин, созданный с помощью следующего кода:
const reduxStore = createStore(
combineReducers(
{
reduxReducer
}
)
);
Теперь, как я могу протестировать метод componentDidMount() и, в частности, проверить, что действие redux fadeOutAndRemoveSplashScreen() вызывается только тогда, когда приложение еще не загружено.
Я действительно думаю, что мне нужно издеваться над моим магазином редуксов, однако я новичок в этом и не знаю, как начать, поэтому пример будет высоко оценен.
Если есть какие-либо другие мысли о моей реализации, не стесняйтесь дать несколько советов.
С уважением
