Redux调度的测试效果

Question

我有一个React模态组件，它显示/隐藏依赖于一个变量，可以通过Redux调度设置/更改。

我有点不知道如何实际测试它。

任何帮助都是感激的。

const HIDE_MODAL = 'HIDE_MODAL';
export const hideModal = () => ({
type: HIDE_MODAL
});

减速器

// import HIDE_MODAL
export default (state = {}, action) => {
let newState = deepClone(state);
switch (action.type) {
case HIDE_MODAL:
newState.showModal = false;
break;
default:
return state;
}
return newState;
}

<<p>组件/strong>

const mapStateToProps = (state) => ({
showModal: state.showModal
});
const mapDispatchToProps = dispatch => ({
closeModal: () => dispatch(hideModal)
});
const MyComponent = ({closeModal, showModal}) => {
if (showModal) {
return <div>
<div>My Modal</div>
<button onClick={closeModal}/>Close</button>
</div>
}
);

it('Should hide modal on click', () => {
const store = {showModal: true};
render(
<Provider store={mockStore(store)}>
<MyComponent />
</Provider>
);
expect(screen.queryByText('My modal')).toBeTruthy();
userEvent.click(screen.queryByText('Close'));
expect(screen.queryByText('My modal')).toBeFalsy();
});

Answer 1

首先，为了测试的目的，您应该将showModal的默认值设置为true。如果我没弄错的话，你的功能closeModal应该稍微改变一下:

const mapDispatchToProps = dispatch => ({
closeModal: () => dispatch(hideModal()),
});

因为hideModal是一个函数，你也应该调用它。

export const hideModal = () => ({
type: HIDE_MODAL
});

否则你应该直接传递一个动作给你的dispatchRedux函数(因为dispatch接受一个至少有type键的对象作为正确工作的参数):

const mapDispatchToProps = dispatch => ({
closeModal: () => dispatch({
type: HIDE_MODAL
}),
});

希望对你有帮助。