圖標用 Jest 測試 React Native 時出錯

Question

我是 Jest 的新手，我正在嘗試對我的應用程序的一個組件進行單元測試，我在其中使用來自 @ui-kitten/components 的圖標。 嘗試測試時出現以下錯誤：

console.error
  The above error occurred in the <Icon> component:

      at Icon (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\src\components\ui\icon\icon.component.tsx:87:34)
      at DateIcon
      at FalsyFC (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\node_modules\@ui-kitten\components\devsupport\components\falsyFC\falsyFC.component.js:41:37)
      at View
      at View (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\node_modules\react-native\jest\mockComponent.js:28:18)
      at View
      at View (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\node_modules\react-native\jest\mockComponent.js:28:18)
      at AnimatedComponent (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\node_modules\react-native\Libraries\Animated\createAnimatedComponent.js:42:43)
      at AnimatedComponentWrapper
      at TouchableOpacity (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\node_modules\react-native\Libraries\Components\Touchable\TouchableOpacity.js:53:37)
      at TouchableWithoutFeedback (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\src\components\devsupport\components\touchableWithoutFeedback.component.tsx:32:1)
      at Input (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\src\components\ui\input\input.component.tsx:141:1)
      at Wrapper (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\src\components\theme\style\styled.tsx:104:3)
      at Input
      at RNCSafeAreaView
      at RNCSafeAreaView (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\node_modules\react-native\jest\setup.js:332:22)
      at vehicleFormtest
      at View
      at View (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\node_modules\react-native\jest\mockComponent.js:28:18)
      at ModalPanel (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\src\components\theme\modal\modalPanel.component.tsx:35:1)
      at ThemeProvider (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\node_modules\@ui-kitten\components\theme\theme\themeProvider.component.js:46:37)
      at MappingProvider (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\node_modules\@ui-kitten\components\theme\mapping\mappingProvider.component.js:39:37)
      at StyleProvider (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\node_modules\@ui-kitten\components\theme\style\styleProvider.component.js:46:37)
      at ApplicationProvider (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\src\components\theme\application\applicationProvider.component.tsx:105:46)

  Consider adding an error boundary to your tree to customize error handling behavior.
  Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

VehicleFormtest.js

import React from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import { Icon, Input } from "@ui-kitten/components";

const DateIcon = (props) => <Icon {...props} name="calendar-outline" />;

const vehicleFormtest = () => (
  <SafeAreaView style={{ flex: 1 }}>
    <Input accessoryRight={DateIcon} />
  </SafeAreaView>
);

export default vehicleFormtest;

VehicleFormtest.test.js

import React from "react";
import { render } from "@testing-library/react-native";
import * as eva from "@eva-design/eva";
import { ApplicationProvider, IconRegistry } from "@ui-kitten/components";
import VehicleFormtest from "./vehicleFormtest";

describe("<VehicleForm />", () => {
  it("test", () => {
    const tree = render(
      <ApplicationProvider {...eva} theme={eva.light}>
        <VehicleFormtest />
      </ApplicationProvider>
    );
  });
});

在 package.json 上開玩笑配置

"jest": {
    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?@react-native|react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|sentry-expo|native-base|@ui-kitten)"
    ]

老實說，我不知道這是 EvaIcons 的問題還是開玩笑配置上的其他問題。 歡迎任何幫助。

使用這些版本 "@eva-design/eva": "^2.1.1" "@ui-kitten/components": "^5.1.0", "@ui-kitten/eva-icons": "^5.1.0 ",

Answer 1

嘗試這個：

  import React from "react";
  import { render } from "@testing-library/react-native";
  import * as eva from "@eva-design/eva";
  import { ApplicationProvider, IconRegistry } from "@ui- 
  kitten/components";
  import { EvaIconsPack } from "@ui-kitten/eva-icons";
  import VehicleFormtest from "./vehicleFormtest";

  describe("<VehicleForm />", () => {
    it("test", () => {
      const tree = render(
        <ApplicationProvider {...eva} theme={eva.light}>
          <IconRegistry icons={EvaIconsPack} />
          <VehicleFormtest />
        </ApplicationProvider>
      );
    });
  });