Мелкий рендеринг компонента, который является классом, который использует контекст - PullRequest
0 голосов
/ 02 мая 2020

Я пытаюсь протестировать компонент, используя shallow с ферментом. Компонент, который я пытаюсь протестировать, является классом и выполняет контекст следующим образом:

class ExampleComponent extends Component {
  static contextType = AppContext;
  ...

и использует его в этом компоненте const { url } = this.context;

При написании теста это использовалось:

const contextWrapper = {
  wrappingComponent: AppContext,
  wrappingComponentProps: { url: 'http://appUrl.com' },
};

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

it('should render correctly', () => {
  const output = mount(<Comonent {...props} />, contextWrapper);
  expect(shallowToJson(output)).toMatchSnapshot();
});

Я провел некоторый рефакторинг и в этом файле есть компонент, который связан с магазином. При использовании mount он ожидает, что хранилище будет предоставлено этому компоненту, поэтому я хотел бы, чтобы мы shallow.

Если я оберну Component с помощью <Provider store={store}>, я смогу получить это для всей работы, но у меня есть тест внизу, пытающийся получить доступ к состоянию на Component, но он пуст и не может его найти.

Вот фрагмент теста, в котором состояние не найдено:

const output = mount(
  <Provider store={store}>
    < ExampleComponent {...newProps} />
  </Provider>,
  contextWrapper,
);
expect(output.state('stateValue')).toBe(true);

, и это ошибка, показанная:

ReactWrapper::state("stateValue") requires that `state` not be `null` or `undefined`

Есть ли способ использовать shallow а контекст? Я нашел этот пакет, чтобы «исправить» его сейчас shallow-with-context но я не уверен, что это правильно? Я также видел старые сообщения о том, что энзим не поддерживает новый контекстный API. это верно? Как лучше всего решить эту проблему?

...