使用typescript时出现react-native-vector-icons/MaterialIcons jest-expo快照测试错误

Question

我学习了jest，使用react-native & expo为组件编写了我的第一个快照测试。我可以在没有Icon组件的情况下运行测试，该组件来自我的组件中的'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配置如下：

"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文档之后，我发现了一种使用mock的变通方法。

只需将以下代码添加到测试中似乎就能达到目的：

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