Получение TypeError: n.getChildContext не является функцией с shallowWithIntl - PullRequest
Новая
       51

Получение TypeError: n.getChildContext не является функцией с shallowWithIntl

0 голосов
/ 30 сентября 2019

Я начал проект несколько недель назад с фронтендом реакции и бэкэндом с моими коллегами. После нескольких проверок кода комментарии о не интернационализированном приложении вернулись к нам. У нас есть интернационализированный бэкэнд, использующий гем i18n, но нам сказали, что стандартным для реакции является использование response-intl в качестве пакета интернационализации внешнего интерфейса. Я только что закончил кодировать интернационализацию, тестируя ее на нескольких языках, чтобы убедиться, что она работает правильно. Что касается тестирования, я столкнулся с проблемой, которой я ударяюсь головой о стену. Я продолжаю получать эту ошибку: n.getChildContext не является функцией. I 'м с использованием пакета фермент-реагировать-интл . Чтобы проверить, работает ли это или нет, я решил начать с создания снимка моих компонентов (как функциональных, так и основанных на классах). Ниже приведен пример одного из моих тестов вместе с ошибкой набора тестов, которую я получил. Все мои тестовые наборы с shallowWithIntl и mountWithIntl терпят неудачу. Должен отметить, что я запускаю свои тесты с помощью команды: 'yarn jest -u'. Из всех поисков и api-документов, которые я прочитал, я не делаю никаких очевидных ошибок, но был бы признателен за любую помощь в ответе.

Вот пример теста:

import React from 'react';
import { loadTranslation, shallowWithIntl } from 'enzyme-react-intl';
import Header from '../components/Header/Header';
loadTranslation("./app/javascript/translations/en-US.json");

describe('Parent header rendering', () => {
     const shallowHeader = shallowWithIntl(<Header />);
     it('matches the snapshot', () => {
         expect(shallowHeader).toMatchSnapshot();
     });
});

Ошибка Test Suite, которую я получаю.

FAIL app / javascript / tests / Header.test.jsx ●Визуализация родительского заголовка ›обнаружена исключительная ситуация объявления 

TypeError: n.getChildContext is not a function

   5 | 
   6 | describe('Parent header rendering', () => {
>  7 |     const shallowHeader = shallowWithIntl(<Header />);
     |                           ^
   8 |     it('matches the snapshot', () => {
   9 |         expect(shallowHeader).toMatchSnapshot();
  10 |     });

  at _enzyme (node_modules/enzyme-react-intl/lib/webpack:/enzyme-react-intl/src/index.js:47:12)
  at Suite.<anonymous> (app/javascript/__tests__/Header.test.jsx:7:27)
  at Object.describe (app/javascript/__tests__/Header.test.jsx:6:1)

Я немного новичок в реакции / шутке / энзиме и хочу учиться, поэтому любые указатели и критические замечания очень ценятся, независимо от того, насколько ониЕшь в моей душе.

Заранее спасибо!

1 Ответ

0 голосов
/ 30 сентября 2019

Вместо того, чтобы работать с пакетом фермент-реакция-intl, который в настоящее время устарел с помощью метода getChildContext, обратитесь к вспомогательным функциям в файле read-intl, которые актуальны; ссылка на тестирование с ферментом . Код написан машинописным шрифтом, и для перехода на js / jsx потребовалось лишь небольшое редактирование. Код ниже. Надеюсь это поможет. Не забудьте прокомментировать источник из репозитория response-intl. 

import React from 'react';
import {IntlProvider} from 'react-intl';
import {mount, shallow} from 'enzyme';

// You can pass your messages to the IntlProvider. Optional: remove if unneeded.
const messages = require('./translations/en-US.json'); // en-US.json
const defaultLocale = 'en-US';
const locale = defaultLocale;

export function mountWithIntl(node) {
  return mount(node, {
    wrappingComponent: IntlProvider,
    wrappingComponentProps: {
      locale,
      defaultLocale,
      messages,
   },
  });
}

  export function shallowWithIntl(node) {
   return shallow(node, {
     wrappingComponent: IntlProvider,
     wrappingComponentProps: {
      locale,
      defaultLocale,
      messages,
     },
  });
}
...