如何编写单元测试来检查单击某个链接后是否显示模式

Question

我正在学习使用 Jest/Enzyme 进行单元测试 - 特别是针对 React/Redux。我正在尝试编写一个测试来从用户的角度检查（这是正确的方法吗？...）单击某个链接后是否显示模式。接下来我想测试单击shade包装器是否modal关闭modal。

模态状态（打开/关闭）由 Redux 控制。

根据 Redux 的当前状态 - 模态获取适当的样式：modal或invisibleModal。

我尝试通过模拟 Redux store 来做到这一点，但我觉得没有它就应该完成 - 我想测试未连接的组件会更好，但如果我错了，请纠正我。

到目前为止测试：

const mockFn = jest.fn();

describe('Contact components', ()=>{
    it('<ContactModal /> renders correctly', ()=>{
        shallow(<ContactModal />)
    })

    it('<ContactForm /> renders correctly', ()=>{
        shallow(<ContactForm toggleContactModal={mockFn} />)
    })

});

describe('In contact form link',()=>{
    const link = shallow(<ContactForm toggleContactModal={mockFn}/>)
    const modalWrapper = shallow(<ContactModal />);

    it('toggleContactModal function is called upon clicking ContactForm',()=>{
        expect(modalWrapper.find('#modal').hasClass('modal')).toBe(false);
        link.simulate('click');

        expect(mockFn.mock.calls.length).toBe(1);
    })
})

模态组件：

export const ContactModal = props => {
    return (
        <>
            <div 
                id='modal' 
                className={props.contactModal ? styles.modal : styles.invisibleModal}
            >
                hello from modal
            </div>
            <div 
                id='shade' 
                className={props.contactModal ? styles.shade : styles.invisibleShade} 
                onClick={props.toggleContactModal}
                onKeyDown={props.toggleContactModal}
            />
        </>
    );
};

const mapStateToProps =state=> {
    return {
        contactModal: state.contactModal
    }
}

const mapDispatchToProps = {
    toggleContactModal
}

export default connect(mapStateToProps, mapDispatchToProps)(ContactModal);

减速器：

export const contactModal = (state=false, action) => {
    switch (action.type){
        case TOGGLE_CONTACT_MODAL:
            return !state;
        default:
            return state
    }
}

提前致谢。

Answer 1

来自编写测试Redux 文档：

...有时您只想测试组件的渲染，而不需要 Redux 存储。

为了能够测试 App 组件本身而不必处理装饰器，我们建议您也导出未装饰的组件

所以，是的，导出未连接的组件并直接测试它是推荐的方法。

对于您的组件，您只需要根据contactModalprop、click 和 keydown 处理程序测试 UI 更改。

这是一个稍微简化的工作示例，可以帮助您入门：

import * as React from 'react';
import { shallow } from 'enzyme';

const ContactModal = props => {
  return (
    <>
      <div
        id='modal'
        className={props.contactModal ? 'modal': 'invisibleModal'}
      >
        hello from modal
          </div>
      <div
        id='shade'
        className={props.contactModal ? 'shade' : 'invisibleShade'}
        onClick={props.toggleContactModal}
        onKeyDown={props.toggleContactModal}
      />
    </>
  );
};

describe('ContactModal', () => {
  it('should render as expected when contactModal is true', () => {
    const wrapper = shallow(<ContactModal contactModal={true} />);
    expect(wrapper.find('#modal').prop('className')).toBe('modal');  // Success!
    expect(wrapper.find('#shade').prop('className')).toBe('shade');  // Success!
  });
  it('should render as expected when contactModal is false', () => {
    const wrapper = shallow(<ContactModal contactModal={false} />);
    expect(wrapper.find('#modal').prop('className')).toBe('invisibleModal');  // Success!
    expect(wrapper.find('#shade').prop('className')).toBe('invisibleShade');  // Success!
  });
  it('should call props.toggleContactModal on click', () => {
    const spy = jest.fn();
    const wrapper = shallow(<ContactModal contactModal={true} toggleContactModal={spy} />);
    wrapper.find('#shade').prop('onClick')();
    expect(spy).toHaveBeenCalled();  // Success!
  });
  it('should call props.toggleContactModal on keydown', () => {
    const spy = jest.fn();
    const wrapper = shallow(<ContactModal contactModal={true} toggleContactModal={spy} />);
    wrapper.find('#shade').prop('onKeyDown')();
    expect(spy).toHaveBeenCalled();  // Success!
  });
});