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

解决：相关测试嵌套在另一个＆＃39;它＆＃39;块

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

1 个答案: