Javascript 在jest测试时，如何将react intl作为react组件方法中的参数传递，抛出'；TypeError:intl.formatMessage不是函数'；

我正在为我的react组件进行单元测试（使用jest）。我有几个从组件调用的方法。 例如：

    export function getText(text, intl) => ((text !== 'NA') ? (intl.formatMessage({ id: value })) : '');

    const ReactComponent = (props) => {
       const text = getText(text, intl);

       return (....);
    }

    export default injectIntl(ReactComponent);

在测试文件中，我有：

    import { getText } from 'path';
    import { intl } from 'react-intl';

    it('should render text', () => {
      expect(getText('string', { intl })).toBe('string');
    });

---

当我尝试运行测试时，它抛出错误intl.formatMessage不是函数。

您的

getText

方法需要两个参数（

text

和

intl

）

同：

const getText = (text, intl) => {
  if (text !== 'NA') {
    return intl.formatMessage({ id: value })
  }

  return ''
}

您当前正在使用

getText（'string'）

调用测试方法。因此，

text

（第一个参数）与

NA

不同，

getText

将返回

intl.formatMessage（…

）。 因为您没有提供

intl

，所以您的方法最终会失败。这就是为什么您得到

它会抛出另一个错误“formatMessage不是函数”

消息

测试时，确保正在导出

getText

，以便使用它

而不是

const getText=（…）

使用：

export const getText=（…）

因此，您可以将其用作：

---

将{getText}从'path/导入/getText'

我想您自己已经解决了这个问题。对于其他正在努力解决这个问题的人，我想解释一下我是如何使用玩笑、酶和打字脚本解决这个问题的

问题是：模仿反应intl 我经历了完全相同的问题。在我的例子中，这是由于模拟react intl模块引起的。我没有模拟formatMessage（），这就是我收到未定义函数错误的原因

官方助手函数不适用于模拟的react intl模块 有一种酶测试的方法。然而，对我来说，它不能与模拟的react intl模块一起工作，因为IntlProvider和react intl的其他依赖项也被模拟模块覆盖

解决方案 首先，我创建了一个虚拟InjectIntl对象，作为相应组件的道具。该对象包含formatMessage（）的模拟定义，该定义返回调用intl.formatMessage调用传递的默认消息

export const getDummyIntlObject = (messages?: any) => {
    const intl: InjectedIntl = {
        ...,
        formatMessage: ({ defaultMessage }) => defaultMessage,
        ...,
    }
    return intl
}

---

export const TestComponent:React.FunctionComponent=（{intl}）=>{
返回(
...
)
}

使用返回的defaultMessage，我可以测试正确的字符串是否在我预期的位置

const props = {
    intl: getDummyIntlObject(),
}

describe('TestComponent', () => {
    ...
    test('translations correct', () => {
        const w = shallow(<TestComponent {...props} />)
        const imageAltText = 'This is a test image'
        ...
        expect(w.find('img').prop('alt')).toContain(imageAltText)
        ...
    })
})

const props={
intl:getDummyIntlObject（），
}
描述（'TestComponent'，（）=>{
...
测试（'翻译正确'，（）=>{
常数w=浅（）
const imageAltText='这是一个测试图像'
...
expect（w.find（'img'）.prop（'alt'））.toContain（imageAltText）
...
})
})

---

请检查我的完整代码示例

关于

它抛出错误。getText不是函数

。如何在测试中导入此方法？从“path”导入{getText}；那就是原因。您没有导出

getText

。我刚刚更新了我的答案：）如问题中所述，我尝试实现导出函数getText（）…{..}，仍然得到“非函数错误”，那么请更新您的问题好吗？您没有导出它

export default injectIntl…

也不会导出

getText

。我在测试中将intl传递给getText，它会抛出intl。formatMessage不是函数。@user8870784如何传递它？你的例子似乎不足以说明这一点。

export const getDummyIntlObject = (messages?: any) => {
    const intl: InjectedIntl = {
        ...,
        formatMessage: ({ defaultMessage }) => defaultMessage,
        ...,
    }
    return intl
}

export const TestComponent: React.FunctionComponent<InjectedIntlProps> = ({ intl }) => {
    return (
        <div>
            <img alt={intl.formatMessage(messages.testImageAltText)} />
            ...
        </div>
    )
}

const props = {
    intl: getDummyIntlObject(),
}

describe('TestComponent', () => {
    ...
    test('translations correct', () => {
        const w = shallow(<TestComponent {...props} />)
        const imageAltText = 'This is a test image'
        ...
        expect(w.find('img').prop('alt')).toContain(imageAltText)
        ...
    })
})