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

Question

正如标题所述，我正在尝试在反应组件上测试 null 返回值。

我已经尝试了解决方案here，但代码覆盖率表明我们没有正确测试第 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”块中