Ad

Receiving TypeError: N.getChildContext Is Not A Function With ShallowWithIntl

I started a project a few weeks ago with a react frontend and ruby backend with my coworkers. After a few code reviews, the comments about have an un-internationalized application have caught back up to us. We have an internationalized backend using an i18n gem, but were told the standard for react was to use react-intl as the frontend internationalization package. I just finished coding-up the internationalization, testing it with a couple languages to ensure it works properly. On the topic of testing, I started running into an issue which I've been banging my head against a wall with.I keep receiving this error: n.getChildContext is not a function. I'm using the package enzyme-react-intl. To test whether or not this works, I decided to only start with taking a snapshot of my components (both functional and class-based). An example of one of my tests is below along with the test suite failure I received. All of my test suites with shallowWithIntl and mountWithIntl fail. I should note that I am running my tests with the command: 'yarn jest -u'. From all of the searches and api docs I have read I'm not making any apparent mistakes, but would appreciate any help to an answer.

Here is an example test:

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();
     });
});

The Test Suite Error I receive.

FAIL app/javascript/tests/Header.test.jsx ● Parent header rendering › encountered a declaration exception

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)

I'm a bit of a react/jest/enzyme noob as it stands and want to learn so any pointers and critiques are greatly appreciated no matter how much they eat at my soul.

Thanks in advance!

Ad

Answer

Instead of working with the enzyme-react-intl package which is currently deprecated with the getChildContext method, reference the helper functions in the react-intl readme which are up-to-date; link to testing with enzyme. The code is written in typescript, and to change to js/jsx only a small edit was required. Code is below. Hope this helps. Don't forget to comment the source from the react-intl repo.

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,
     },
  });
}
Ad
source: stackoverflow.com
Ad