Как использовать прототип массива в моем тесте Jest для моего React Component?

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: []
}