找不到所需的“intl”对象。 <IntlProvider> 需要存在于组件祖先中。在使用 wrapper.html()

Posted 2023-02-21

【中文标题】找不到所需的“intl”对象。 <IntlProvider> 需要存在于组件祖先中。在使用 wrapper.html()

【英文标题】：Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry. while using wrapper.html()

【发布时间】：2021-10-03 05:21:57

【问题描述】：

我正在实施单元测试，用 jest 和酶来进行反应项目。我使用react-intl 来支持多语言。

我的基本单元测试代码是

import React from 'react'; 
import MobileRechargeComponent from './'; 
import   shallowWithIntl, mountWithIntl  from '../../../../setupTestsHelper'; 

const wrapper = shallowWithIntl(<MobileRechargeComponent />); 
describe('Title', () => 
    it("should render initial layout", () => 
        expect(wrapper.getElements()).toMatchSnapshot();
    );
    it('renders master components properly', () => 
        console.log('wrapper>>>>>>>>>>>>>>>>>', wrapper.html())
        expect(wrapper.length).toEqual(1);
    ); 
);

我收到如下图所示的错误

我的setupTestsHelper文件代码如下

import React from 'react'; 
import  IntlProvider, intlShape, createIntl  from 'react-intl'; 
import  mount, shallow  from 'enzyme';
import  getCurrentLanguage  from './Lang'; 

const LocalLanguage = 
    french: ,
    arabic: ,
    english: 


const lang = getCurrentLanguage('en', LocalLanguage)
const intl = createIntl( locale: 'en', lang , );
const nodeWithIntlProp = (node) => 
    return React.cloneElement(node,  intl );

export const shallowWithIntl = (node) => 
    return shallow(nodeWithIntlProp(node),  context:  intl  );
 
export const mountWithIntl = (node) => 
    return mount(nodeWithIntlProp(node), 
        context:  intl ,
        childContextTypes:  intl: intlShape 
    );

【参考方案1】：

需要实现自定义intl函数，连接react-intl的intl对象。

为此，请将此函数添加到您的 setupTestsHelper 文件中

import  IntlProvider  from 'react-intl';
const messages = require('./Lang/en.json') // en.json 
const defaultLocale = 'en'

const locale = defaultLocale

export const intl = (component) => 
     return (
         <IntlProvider
             locale=locale
             messages=messages
         >
             React.cloneElement(component)
         </IntlProvider>
     );

并在*.test.js 文件中使用它，如下所示

    import   intl  from '../../../../setupTestsHelper';

    const wrapper = mount(intl(<MyComponent />));