Unable to access extendTheme when writing test-cases and testing using jest

Question

I am using jest and testing-library/react to write test-cases for my React.js app. I'm concerned about the extendTheme property of nativeBase which is used inside the nativeBaseProvider wrapper at App.js. The files are able to access at runtime and app is working fine but when writing test-cases these properties are not being referenced.

Below is the jest.config.js

    module.exports = {
      coverageThreshold: {
        global: {
          statements: 90,
          branches: 80,
          functions: 80,
          lines: 90,
        },
      },
      testResultsProcessor: "jest-sonar-reporter",
      // preset: 'jest-expo',
      testEnvironment: "jsdom",
      testMatch: [
        "<rootDir>/src/**/*.test.js",
        "<rootDir>/src/**/*.test.ts",
        "**/?(*.)(spec|test).js?(x)",
      ],
      testPathIgnorePatterns: [
        "<rootDir>/node_modules/",
        "<rootDir>/__tests__/__mocks__/",
        "<rootDir>/__tests__/setup.js",
        "<rootDir>/tests/",
      ],
      moduleFileExtensions: ["js", "json", "jsx", "ts", "tsx", "node"],
      moduleDirectories: ["node_modules"],
      //   moduleNameMapper: {
      //     ".*\\.(jpg|jpeg|svg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
      //       "jest-transform-stub",
      //     "\\.svg": "<rootDir>/__tests__/__mocks__/svgMock.js",
      //     "\\.(less)$": "identity-obj-proxy",
      //   },
      // setupFiles: [
      //   "<rootDir>/node_modules/react-native-gesture-handler/jestSetup.js",
      //   "<rootDir>/__tests__/setup.js",
      //   "jest-prop-type-error",
      // ],
      moduleNameMapper: {
        "^utils/secureStore$": "<rootDir>/src/utils/secureStore/index.js",
        "^utils/analytics$": "<rootDir>/src/utils/analytics/index.js",
        "^utils/performance/SentryHelper$":
          "<rootDir>/src/utils/performance/SentryHelper.js",
        "^config$": "<rootDir>/src/config.js",
        "^store/storeUtils$": "<rootDir>/src/store/storeUtils.js",
        "^global/routes$": "<rootDir>/src/global/routes.js",
        "^global/paths$": "<rootDir>/src/global/paths.js",
        "^pages/BulkCreateAndUpdate/create$":
          "<rootDir>/src/pages/BulkCreateAndUpdate/create.js",
        "^pages/BulkCreateAndUpdate/BulkUpdate$":
          "<rootDir>/src/pages/BulkCreateAndUpdate/BulkUpdate.js",
        "^pages/BulkCreateAndUpdate/BulkUpdateStatus$":
          "<rootDir>/src/pages/BulkCreateAndUpdate/BulkUpdateStatus.js",
        "^pages$": "<rootDir>/src/pages/index.js",
        "^pages/(.*)$": "<rootDir>/src/pages/$1/index.js",
        "^api/apiCall$": "<rootDir>/src/api/apiCall.js",
        "^global/constants$": "<rootDir>/src/global/constants.js",
        "^theme/colors$": "<rootDir>/src/theme/colors.js",
        "^react-native$": "<rootDir>/__mocks__/react-native.js",
        "^native-base$": "<rootDir>/__mocks__/native-base.js",
        "^atoms/(.*)$": "<rootDir>/src/atoms/$1",
        "^organisms/(.*)$": "<rootDir>/src/organisms/$1",
        "^molecules/(.*)$": "<rootDir>/src/molecules/$1",
        "^api/(.*)$": "<rootDir>/src/api/$1",
        "^utils/(.*)$": "<rootDir>/src/utils/$1",
        "^assets$": "<rootDir>/src/assets",
        "^assets/images/(.*)$": "<rootDir>/src/assets/images/$1",
        "\\.(png|jpg|jpeg|gif|svg)$": "<rootDir>/__mocks__/fileMock.js",
      },
      transformIgnorePatterns: ["node_modules/(?!axios)/"],
      collectCoverage: true,
      collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],
      coverageReporters: ["lcov", "html", "text", "cobertura"],
      reporters: [
        "default",
        "jest-junit",
        [
          "./node_modules/jest-html-reporter",
          {
            pageTitle: "Test Report",
            includeConsoleLog: true,
            includeFailureMsg: true,
            includeSuiteFailure: true,
          },
        ],
      ],
    };

and since, I have mocked the library native-base. The mock file(/mocks/native-base.js) is as below:

    const NativeBase = jest.requireActual("native-base");
    
    module.exports = {
      ...NativeBase,
      // Add any mocked components or modules here if needed
    };

And the error I'm getting is-

FAIL  src/theme/theme.test.js
  ● Test suite failed to run

    TypeError: (0 , _nativeBase.extendTheme) is not a function

      60 | const boldFont = 'Nunito-Bold';
      61 |
    > 62 | export const theme = extendTheme({
         |                                 ^
      63 |      colors,
      64 |   breakpoints,
      65 |      fontConfig: {

      at Object.<anonymous> (src/theme/theme.js:62:33)
      at Object.require (src/theme/theme.test.js:1:1)

Now, this theme file is being used in App.js inside of the NativeBaseProvider with the theme property and it's able to access during the runtime of the app but when running test-cases this is failing.

Another issue, that I'm facing is regarding referencing anything from native-base. The error I'm getting is ->

 

    FAIL  src/atoms/Playground/index.test.js
      ● Playground Component › renders without crashing
    
        Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    
           7 | describe("Playground Component", () => {
           8 |   it("renders without crashing", () => {
        >  9 |     render(
             |           ^
          10 |       <NativeBaseProvider>
          11 |         <Playground />
          12 |       </NativeBaseProvider>
    
          at createFiberFromTypeAndProps (node_modules/react-dom/cjs/react-dom.development.js:28439:17)
          at createFiberFromTypeAndProps (node_modules/react-dom/cjs/react-dom.development.js:28465:15)
          at createFiberFromElement (node_modules/react-dom/cjs/react-dom.development.js:15750:23)
          at reconcileSingleElement (node_modules/react-dom/cjs/react-dom.development.js:15808:35)
          at reconcileChildFibers (node_modules/react-dom/cjs/react-dom.development.js:19174:28)
          at reconcileChildren (node_modules/react-dom/cjs/react-dom.development.js:19883:5)
          at updateHostRoot (node_modules/react-dom/cjs/react-dom.development.js:21615:14)
          at beginWork (node_modules/react-dom/cjs/react-dom.development.js:27426:14)
          at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:26560:12)
          at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26466:5)
          at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:26434:7)
          at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:25738:74)
          at callback (node_modules/react/cjs/react.development.js:2667:24)
          at flushActQueue (node_modules/react/cjs/react.development.js:2582:11)
          at actImplementation (node_modules/@testing-library/react/dist/act-compat.js:46:25)
          at renderRoot (node_modules/@testing-library/react/dist/pure.js:161:25)
          at renderRoot (node_modules/@testing-library/react/dist/pure.js:247:10)
          at Object.<anonymous> (src/atoms/Playground/index.test.js:9:11)
    ```

Now this Playground file is pretty basic component with simple Text and View as below ->

import React from "react";
import { View, Text } from "native-base";

const Playground = () => {
  return (
    <View>
      <Text>Playground testing here</Text>
    </View>
  );
};

export default Playground;

This error is thrown everywhere wherever native-base is being used. 

But iff I were to replace the View and Text to just a div and the text withing that it works fine.