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

Question

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

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 配置是这样的：

"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"
    ]
  },

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

Answer 1

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

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

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