Docs should provide better info on testing Nextjs apps with Native base

[MiguelNiblock]

I was trying to set up Jest with Native-base on Nextjs, and it was a bit of a 2-day nightmare. The second day of trying I decided to take meticulous notes so I could better understand the problem. I ended up finding a complete solution and writing an article about it. You can find it here. https://dev.to/miguelniblock/jest-for-native-base-on-nextjs-with-react-native-web-34b8

The final reproducible example of Jest configuration for Native-base with Nextjs can be found here. https://github.com/MiguelNiblock/next-jest-nativebase

Here's the final jest config file:

// You can learn more about each option below in the Jest docs: https://jestjs.io/docs/configuration.

module.exports = {
  collectCoverageFrom: ["**/*.{js,jsx,ts,tsx}", "!**/*.d.ts", "!**/node_modules/**"],
  moduleFileExtensions: ["web.tsx", "tsx", "web.ts", "ts", "web.jsx", "jsx", "web.js", "js"],
  moduleNameMapper: {
    // Handle CSS imports (with CSS modules)
    // https://jestjs.io/docs/webpack#mocking-css-modules
    "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",

    // Handle CSS imports (without CSS modules)
    "^.+\\.(css|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",

    // Handle image imports
    // https://jestjs.io/docs/webpack#handling-static-assets
    "^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$": `<rootDir>/__mocks__/fileMock.js`,

    // Handle module aliases
    "^@/components/(.*)$": "<rootDir>/components/$1",

    "^@/pages/(.*)$": "<rootDir>/pages/$1",
  },
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  testPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/.next/"],
  transform: {
    // Use babel-jest to transpile tests with the next/babel preset
    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
    "^.+\\.(js|jsx|ts|tsx)$": ["babel-jest", { presets: ["next/babel", "@babel/preset-flow"] }],
  },
  transformIgnorePatterns: ["/node_modules/?!(react-native)"],
  testEnvironment: "jest-environment-jsdom",
  preset: "react-native-web",
}

and jest.setup.js

import "@testing-library/jest-dom/extend-expect"

import mockSafeAreaContext from "react-native-safe-area-context/jest/mock"

jest.mock("react-native-safe-area-context", () => mockSafeAreaContext)