Error with Icons testing React Native with Jest

Viewed 182

I'm new to Jest and im trying to do unit tests to one component of my App in which i use Icons from @ui-kitten/components. When trying to test i get the following Error:

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>
    );
  });
});

Jest config on 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)"
    ]

Honestly i dont know if it's problem of the EvaIcons or something else on the jest configuration. Any help will be welcomed.

Using these versions "@eva-design/eva": "^2.1.1" "@ui-kitten/components": "^5.1.0", "@ui-kitten/eva-icons": "^5.1.0",

0 Answers
Related