react-nativejestjsreact-navigation-bottom-tabreact-native-testing-library

How to test bottom tab bar using react native test library


I am trying to do testing for my react bottom tab bar component while testing it I am getting below error.

I followed all the solutions available in this Link no luck for me.

https://github.com/react-navigation/react-navigation/issues/8669

 /Users/apple/Documents/MM/myproject/node_modules/@react-navigation/elements/lib/commonjs/assets/back-icon.png:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){�PNG

My testing component

Tabbar.test.js

import React from "react";
import { render, fireEvent } from "@testing-library/react-native";
import Tabbar from "../Tabbar";

it("Tab tests", () => {
 
  const addItemButton = render(<Tabbar />).toJSON;
}

My Tab bar component Tab.js file

import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Image } from "react-native";

const Tab = createBottomTabNavigator();

const Tabbar = ({ tabData }) => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        headerShown: false,
        tabBarActiveTintColor: "00000",
        tabBarInactiveTintColor: "FFFF",
      })}
    >
      {tabsInfo.map((element) => {
        return (
          <Tab.Screen
            key={element.idx}
            name={element.tabName}
            component={element.component}
            
          />
        );
      })}
    </Tab.Navigator>
  );
};
export default Tabbar;

This is my jest config code

jest.config.js

module.exports = {
  preset: "react-native",
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
  setupFilesAfterEnv: ["@testing-library/jest-native/extend-expect"],
  transformIgnorePatterns: [
    "node_modules/(?!(@react-native|react-native|react-native-vector-icons)/)",
  ],
};

Solution

  • Update transformIgnorePatterns in the jest config file.

      transformIgnorePatterns: [
        "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|rollbar-react-native|@fortawesome|@react-native|@react-navigation)",
      ],
    

    Reference link https://github.com/react-navigation/react-navigation/issues/8669