Umi: 测试时提示：formatMessage not initialized yet, you should use it after react app mounted

[LingzhiLiu]

在单元测试中，使用enzyme初始化含有formatMessage方法的组件时，无论使用mount或者shallow：
mount(
都会在umi-plugin-locale出现warning：

有没有解决办法在测试中解决这个warning？

[imhele]

测试时组件顶层没有国际化 context 的 provider ，目前比较简单的方法是 mock 掉 formatMessage

[sorrycc]

@imhele 有空可以写下如何 mock 掉 formatMessage，很多人应该都不会。

[LingzhiLiu]

我解决了，新建了一个intlHelper.js文件，在往component注入intl的同时，调用umi locale的_setIntlObject来初始化umi的intl。这样就不会在mount的过程中报错说formatMessage没有初始化了。但是这种做法可能不被支持，毕竟_setIntlObject是umi内部函数。
代码如下：

import { IntlProvider, intlShape } from 'react-intl'
import { mount } from 'enzyme';
import React from 'react';
import { _setIntlObject } from 'umi/locale'
import messages from '../locales/en-US'

const intlProvider = new IntlProvider({ locale: 'en-US', messages }, {})
const { intl } = intlProvider.getChildContext()

function nodeWithIntlProp(node) {
  _setIntlObject(intl);
  return React.cloneElement(node, { intl })
}

export function mountWithIntl(node, { context, childContextTypes } = {}) {
  return mount(
    nodeWithIntlProp(node),
    {
      context: Object.assign({}, context, { intl }),
      childContextTypes: Object.assign({}, { intl: intlShape }, childContextTypes),
    }
  )
}

在渲染component时直接调用即可
const enzymeWrapper = mountWithIntl(<MyComponent {...props} />)

参考了：
https://gist.github.com/mirague/c05f4da0d781a9b339b501f1d5d33c37/
https://github.com/umijs/umi/blob/master/packages/umi-plugin-locale/test/locale.test.js

[imhele]

或许可以在 umi-plugin-locale 中添加 <TestIntl /> 和 <MockIntl config={{ formatMessage: 'Mock text' }} /> 导出，需要测试时在组件外包裹一层

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[paradite]

现在可用的mock formatMessage 的方案：

import React from 'react';
import { mount } from 'enzyme';
import { formatMessage } from 'umi-plugin-react/locale';
import { MyComponent } from '../../src/component';

import messages from '../../src/locale/en-US';

jest.mock('umi-plugin-react/locale');

describe('component/MyComponent.test.js', () => {
  it('MyComponent', async () => {
    formatMessage.mockImplementation(({ id }) => {
      return <span>{messages[id]}</span>;
    });
    const wrapper = mount(<MyComponent />);
    const html = wrapper.html();
    expect(html).toMatch(/My translation/);
  });
});

[goldentiger1127]

mountWithIntl
Enzyme expects an adapter to be configured, but found none.
To configure an adapter, you should call Enzyme.configure({ adapter: new Adapter() })
before using any of Enzyme's top level APIs, where Adapter is the adapter
corresponding to the library currently being tested. For example:
我在使用你的方法的时候出现这个报错