如何在Jest测试中为我的React组件使用数组原型？

Question

尝试在React loader组件上运行测试时遇到以下错误：

TypeError: Cannot read property 'some' of undefined

或

TypeError: error.some is not a function

这是我的组成部分

import React, {
  Component
} from 'react';
import PropTypes from 'prop-types';

import ServiceError from '../ServiceError/ServiceError';
import Spinner from '../Spinner/Spinner';

class Loader extends Component {
  static displayName = 'Loader';

  static propTypes = {
    error: PropTypes.array,
    loaded: PropTypes.bool.isRequired,
    noData: PropTypes.object,
    render: PropTypes.func.isRequired
  };

  get spinner() {
    const {
      loaded
    } = this.props;

    return <Spinner show = {!loaded
    }
    />;
  }

  get component() {
    const {
      loaded,
      noData,
      render
    } = this.props;

    if (!loaded && !this.hasError) {
      return this.spinner;
    }

    if (!loaded && this.hasError) {
      return this.serviceError;
    }

    // Handles API returning no data scenario
    if (loaded && !this.hasError && noData) {
      return this.serviceError;
    }

    return render();
  }

  get hasError() {
    const {
      error
    } = this.props;

    return error.some(el => el.show === true);
  }

  get serviceError() {
    const {
      noData
    } = this.props;

    if (this.hasError) {
      return <ServiceError / > ;
    }

    return <ServiceError { ...noData
    }
    noIcon = {
      true
    }
    />;
  }

  render() {
    return this.component;
  }
}

export default Loader;

这是我写的测试

import React from 'react';
import renderer from 'react-test-renderer';

import Loader from './Loader';

describe('<Loader />', () => {
      const renderDiv = () => < div > Successfully loaded! < /div>;
      const props = {
        loaded: false,
        render: renderDiv
      };

      it('renders correctly', () => {
            const component = renderer.create( < Loader { ...props
              }
              />);
              const tree = component.toJSON();

              expect(tree).toMatchSnapshot();
            });

          it('renders content', () => {
              const component = renderer.create( < Loader { ...props
                }
                loaded = {
                  true
                }
                />);
                const tree = component.toJSON();

                expect(tree).toMatchSnapshot();
              });

            it('renders error', () => {
                const error = {
                  show: true,
                  message: 'Service failed. Please try again'
                };
                const component = renderer.create( < Loader { ...props
                  }
                  error = {
                    error
                  }
                  />);
                  const tree = component.toJSON();

                  expect(tree).toMatchSnapshot();
                });

              it('renders multiple children', () => {
                const component = renderer.create( <
                  Loader { ...props
                  } >
                  <
                  p > Loading... < /p> <
                  p > Please wait < /p> <
                  /Loader>
                );
                const tree = component.toJSON();

                expect(tree).toMatchSnapshot();
              });

              it('renders serviceError', () => {
                const component = renderer.create( <
                  Loader { ...props
                  } >
                  <
                  p > Loading... < /p> <
                  p > Please wait < /p> <
                  /Loader>
                );
                const tree = component.toJSON();

                expect(tree).toMatchSnapshot();
              });

              it('renders serviceError if loaded is true but noData was passed', () => {
                const noData = {
                  description: 'No data'
                };
                const error = {
                  show: false
                };

                const component = renderer.create( <
                  Loader { ...props
                  }
                  loaded = {
                    true
                  }
                  noData = {
                    noData
                  }
                  error = {
                    error
                  }
                  />
                );
                const tree = component.toJSON();

                expect(tree).toMatchSnapshot();
              });
            });

我认为更改assertion会起作用

it('renders error', () => {
      const error = [{
        show: true,
        message: 'Service failed. Please try again'
      }];
      const component = renderer.create( < Loader { ...props
        }
        error = {
          error
        }
        />);
        const tree = component.toJSON();

        expect(tree).toMatchSnapshot();
      });

但是那没有用。我在做什么错了？

Answer 1

在某些测试中，您没有向组件提供error属性，这意味着error有时可能是undefined。因此，您无法读取.some ...的属性undefined ...

您可以执行以下操作来测试其存在：

get hasError() {
  const {
    error
  } = this.props;

  return Array.isArray(error) && error.some(el => el.show === true);
}

否则，您可以提供一个默认的道具：

static defaultProps = {
  error: []
}