react-native-vector-icons/MaterialIcons jest-expo 快照测试错误与打字稿

Posted 2023-02-19

【中文标题】react-native-vector-icons/MaterialIcons jest-expo 快照测试错误与打字稿

【英文标题】：react-native-vector-icons/MaterialIcons jest-expo snapshot test error with typescript

【发布时间】：2020-08-21 16:24:11

【问题描述】：

我在学习玩笑，使用 react-native 和 expo 编写我的第一个组件快照测试。我可以在没有来自组件内的“react-native-vector-icons/MaterialIcons”的图标组件的情况下运行测试。但是，当我尝试使用上述图标组件运行测试时，出现以下错误：

ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

  at Object.get Text [as Text] (node_modules/react-native/Libraries/react-native/react-native-implementation.js:118:12)
  at Icon.render (node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/lib/create-icon-set.js:120:58)
  at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7618:31)
  at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7568:24)
  at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9043:16)

  Cannot log after tests are done. Did you forget to wait for something async in your test?
    Attempted to log "Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/functio
n (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might 
have mixed up default and named imports.

Check the render method of `Icon`.
    in Icon (created by Icon)
    in Icon".

我的测试代码如下：

import React from 'react'
import * as Icon from 'react-native-vector-icons/MaterialIcons'
import renderer from 'react-test-renderer'

it('Renders an icon', () => 
  const tree = renderer.create(
    <Icon.default
    size=20
    color= 'grey' 
    name= true ? 'check-box' : 'check-box-outline-blank' 
  />
  ).toJSON()
  expect(tree).toMatchSnapshot();
)

我在 package.json 中的玩笑配置是这样的：

"jest": 
    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|react-clone-referenced-element|expo(nent)?|@expo(nent)?/.*|react-navigation|react-native-vector-icons|@unimodules))"
    ],
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "android.ts",
      "android.tsx"
    ]
  ,

组件在测试之外运行良好。

【问题讨论】：

不直接导入 Icon 有什么原因吗？难道你不能import Icon from 'react-native-vector-icons/MaterialIcons' 并使用<Icon> 而不是<Icon.default> 吗？

是的，我最初就是这样做的。在尝试帮助修复它的过程中，我将其更改为上述方式。无论哪种方式;默认或命名导入导致相同的错误。

【参考方案1】：

在仔细阅读了 jest 文档后，我找到了一种解决方法，即使用 mocks。

只需将以下内容添加到测试中似乎就可以解决问题：

jest.mock('react-native-vector-icons/MaterialIcons', () => 'Icon')

【讨论】：

我也这样做了，但是，现在我有一个错误 TypeError: _MaterialIcons.default.loadFont is not a function。任何想法如何解决这个问题？