开玩笑未能测试导入 FontAwesomeIcon 的组件答案

【问题标题】：Jest failing to test component that imports FontAwesomeIcon开玩笑未能测试导入 FontAwesomeIcon 的组件
【发布时间】：2020-01-07 18:04:19
【问题描述】：

我正在尝试使用 Jest 和 react-test-renderer 测试一个简单的功能性 react-native 组件。将 FontAwesomeIcon 组件导入我的组件后，我的测试失败并显示以下内容：

FAIL  src/BudgetLog/components/TransactionList/__tests__/TransactionList.test.js
● Test suite failed to run

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

/Users/alexlauni/Code/flex-monet/node_modules/@fortawesome/react-native-fontawesome/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export { default as FontAwesomeIcon } from './dist/components/FontAwesomeIcon'
                                                                                         ^^^^^^

SyntaxError: Unexpected token export

  1 | import React from 'react';
  2 | import { View, Text, Image, StyleSheet } from 'react-native';
> 3 | import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
    | ^
  4 | import { faCommentAlt as commentIcon } from '@fortawesome/free-regular-svg-icons';
  5 |
  6 | const TransactionListItem = ({ created_at, created_by, amount }) => {

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at Object.<anonymous> (src/BudgetLog/components/TransactionList/TransactionListItem.js:3:1)

为我的项目解决此问题的正确解决方案是什么？可能更多的组件将使用 FontAwesome 图标，所以我正在寻找一种在未来将大部分透明的解决方案。

我看到那个笑话谈到了“变换”，但我不明白它在说什么，而且我发现文档有点密集。我想我可以模拟 FontAwesomeIcon 组件，但我担心我必须明确地模拟我使用的每个图标，这似乎过于繁重。有更好的解决方案吗？这感觉就像只需要一些配置。

【问题讨论】：

标签： react-native font-awesome-5

【解决方案1】：

我在测试文件中模拟了模块@fortawesome/react-native-fontawesome，它通过了！

jest.mock('@fortawesome/react-native-fontawesome', () => ({
    FontAwesomeIcon: ''
}))

【讨论】：

非常感谢！ ^____^

【解决方案2】：

我对它进行了不同的模拟。使用 Font Awesome documentation 我想出了这个解决方案。

创建此文件（我使用的是 TS，将其设为正确的扩展名）：

__mocks__\@fortawesome\react-fontawesome.tsx

粘贴这个：

import React from 'react'

export function FontAwesomeIcon({ className, children, ...props }: { className?: string, children: any }) {
    return <i className={`fa ${className}`} {...props}>{children}</i>
}

进行测试：

  test('Renders a single button with an icon', async () => {
    render(
      <ButtonBox label='label color='btn-grey' icon={['fas', 'coffee']} />
    )
    expect(screen.queryByTestId('button-icon')).toBeInTheDocument();
  });

当我打印出来时

【讨论】：