使用Jest和Enzyme在React中测试'null'组件的返回值

Question

如标题所示，我正在尝试测试react组件上的null返回值。

我在这里尝试过该解决方案，但代码覆盖率表明我们尚未对第7行进行正确测试： return null 。 我在这里想念什么？

零件：

import React from 'react';
import { func, bool } from 'prop-types';
import CloudyAlert from '../../assets/alert_cloud.svg';

const Alert = props => {
  if (!props.show) {
    return null;
  }
  return (
    <div onClick={props.onDismiss} className="alert">
      <img src={CloudyAlert} alt="alert to let you know time is up" />
      <button>Ok</button>
    </div>
  );
};

Alert.propTypes = {
  onDismiss: func.isRequired,
  show: bool
};

export default Alert;

测试：

import React from 'react';
import Enzyme from 'enzyme';
import Alert from '../Alert';
import { mount, shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

describe('Alert', () => {
  it('renders when show is true', () => {
    let wrapper = mount(<Alert onDismiss={jest.fn()} show />);

    it('renders correctly', () => {
      expect(toJson(wrapper)).toMatchSnapshot();
    });

    it('shows alert when start is clicked and time is zero', () => {
      expect(wrapper.find('Alert').props().show).toBe(true);
    });

    it('does not show alert when show is false', () => {
      wrapper = shallow(<Alert show={false} />);
      expect(wrapper.type()).toEqual(null);
    });
  });
});

Answer 1

解决：相关测试嵌套在另一个“ it”块中