реле современное: как имитировать реле для модульного тестирования

Я пытаюсь протестировать современный контейнер Relay Relay, но у меня возникла эта проблема.

TypeError: Cannot read property 'environment' of undefined

Вот тестовый код:

test('render component', () => {
  const tree = renderer.create(
    <User />,
  ).toJSON();

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

react-native relaymodern
person user3462064    schedule 26.08.2017    source источник

Ответы (2)


arrow_upward
-1
arrow_downward

Добавьте ниже в папку __mocks__. Затем в тесте добавьте jest.mock('react-relay'); к модульному тесту, которому требуется реле. Это смоделирует реле и оставит только компонент для тестирования.

import React from 'react';
import PropTypes from 'prop-types';

const relayMock = jest.genMockFromModule('react-relay');

const relayChildContextTypes = {
  relay: PropTypes.object,
};

const relayEnvironment = {
  lookup: jest.fn(),
};

const relayContext = {
  relay: {
    environment: relayEnvironment,
    variables: {},
  },
};

const relayFragmentProps = {
  relay: {
    environment: relayEnvironment,
  },
};

const relayRefetchProps = {
  relay: {
    environment: relayEnvironment,
    refetch: jest.fn(),
  },
};

const relayPaginationProps = {
  relay: {
    environment: relayEnvironment,
    hasMore: jest.fn(),
    loadMore: jest.fn(),
    isLoading: jest.fn(),
  },
};

relayMock.__relayEnvironment = relayEnvironment;
relayMock.__relayFragmentProps = relayFragmentProps;
relayMock.__relayRefetchProps = relayRefetchProps;
relayMock.__relayPaginationProps = relayPaginationProps;

const makeRelayWrapper = (relayProps) => (
  (Comp) => {
    class HOC extends React.Component {
      getChildContext() {
        return relayContext;
      }

      render() {
        return <Comp {...this.props} {...relayProps}/>;
      }
    }

    HOC.childContextTypes = relayChildContextTypes;
    return HOC;
  }
);

relayMock.QueryRenderer = jest.fn(() => React.createElement('div', null, 'Test'));

relayMock.createFragmentContainer = makeRelayWrapper(relayFragmentProps);
relayMock.createRefetchContainer = makeRelayWrapper(relayRefetchProps);
relayMock.createPaginationContainer = makeRelayWrapper(relayPaginationProps);

module.exports = relayMock;

person s.Lawrenz    schedule 08.11.2018

arrow_upward
-2
arrow_downward

На самом деле вам вообще не нужно издеваться над переменной окружения. Обычно я добавляю:

export class User

к объявлению класса класса, который я хочу протестировать. (Обязательно сохраните экспорт по умолчанию в вашей подключенной версии того же класса).

Затем я могу протестировать компонент предпочтительным способом, импортировав компонент без необходимости реле, как в моем тесте:

 import { User } from '../User'

Это устраняет необходимость в насмешливом реле, и вы можете чисто передавать реквизиты компоненту.

person Andreas    schedule 18.01.2018