TypeError: Cannot read property 'language' of undefined about gatsby-plugin-intl HOT 4 CLOSED

        <IntlContextConsumer>
            {({ languages, language: currentLocale }) => {
                langOptions = languages.map((language) => ({
                    value: language,
                    label: intl.formatMessage(languageNames[language]),
                }));

                const currentValue = langOptions.filter(
                    (x) => x.value === currentLocale,
                );
                return (
                    <Select
                        defaultValue={currentValue[0]}
                        options={langOptions}
                        onChange={changeLang}
                        isSearchable={false}
                        className={languageStyle.langField}
                    />
                );
            }}
        </IntlContextConsumer>

<Language />

import toJson from 'enzyme-to-json';
import { shallowWithIntl } from '../test-utils/intl-setup';

describe('Footer', () => {

     it('works as expected', () => {

        const footerComponent = shallowWithIntl(
            <Footer testMinWidth992={global.innerWidth >= 992} />,
        );
       expect(toJson(footerComponent)).toMatchSnapshot();
    });
});

import React from 'react';
import { mount, shallow, render } from 'enzyme';
import { IntlContextProvider, IntlProvider } from 'gatsby-plugin-intl';

import messages from '../intl/es.json';
const es = messages;
const locales = ['en', 'es', 'fr'];
const intlConfig = {
    language: "es",
    languages: locales,
    messages: messages,
    originalPath: "/",
    redirect: true,
    routed: true,
};

export function shallowWithIntl(component) {
    return shallow(
        <IntlContextProvider value={intlConfig}>
            <IntlProvider locale="es" messages={es}> 
                {component}
            </IntlProvider>
        </IntlContextProvider>
    );
}