unit testing on nextJS + chakra-UI project

Question

I am working on a NextJS + chakra-UI project and so far I couldn't find any information on how to get jest and react-testing library to understand the way chakra-UI renders components. My tests keep throwing errors like the following:

TypeError: Cannot use 'in' operator to search for 'colors.green.200' in undefined

       6 | describe("Nav-bar testing", () => {
       7 |   it("should render NavBar correctly", () => {
    >  8 |     render(<NavBar />);
         |           ^
       9 |     const button = screen.getByText("Login");
      10 |     expect(button).toBeInTheDocument();
      11 |   });

When I make a react jsx element without the components chakra provides tests execute correctly. Is there any source explaining how to set things up in this case ?

EDIT This is the test file:

import React from "react";
import { screen, render } from "@testing-library/react";
import "@testing-library/jest-dom";
import NavBar from "../components/NavBar/NavBar";

describe("Nav-bar testing", () => {
  it("should render NavBar correctly", () => {
    render(<NavBar />);
    const button = screen.getByText("Login");
    expect(button).toBeInTheDocument();
  });
});

This is the _app which contains the chakra theme object and the wrapper:

import type { AppProps } from "next/app";
import "../styles/globals.css";
import { ChakraProvider } from "@chakra-ui/react";
import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  fonts: {
    body: "montserrat, sans-serif",
  },
  textStyles: {
    h1: {
      fontSize: "60px",
      fontWeight: "bold",
    },
  },
});

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

This is the navBar component:

import { Box, Button, Flex, Image, Text } from "@chakra-ui/react";
import SearchBar from "../SearchBar/SearchBar";
const NavBar = () => {
  return (
    <Flex
      bg="#f00"
      h={600}
      w="100%"
      bgGradient="linear(to-r, green.200, pink.500)"
      overflow={"hidden"}
      position="relative"
      flexDirection={"column"}
    >
      <Flex //nav bar
        w={"100%"}
        h={100}
        alignItems="center"
        justifyContent="flex-end"
      >
        <Flex // Login button container
          cursor="pointer"
          alignItems={"center"}
          justifyContent="center"
          borderRadius={10}
          padding={1}
          marginRight={450}
        >
          <Button //login button
            variant="solid"
            colorScheme="pink"
            isLoading={false}
            h={50}
            w={100}
            fontSize={25}
            fontWeight={700}
          >
            Login
          </Button>
        </Flex>
        <Text
          fontSize={25}
          fontWeight={800}
          color="white"
          cursor="pointer"
          marginRight={70}
        >
          Help
        </Text>
        <Text
          fontSize={25}
          fontWeight={800}
          color="white"
          cursor="pointer"
          marginRight={70}
        >
          About us
        </Text>
        <SearchBar />
      </Flex>
      <Box //container of "more than tickets"
        w={800}
        h={400}
        position="absolute"
        left="0"
        bottom="0"
        marginLeft={50}
        marginBottom={50}
        borderRadius={100}
        overflow="hidden"
        bg="rgb(167, 138, 173)"
      >
        <Box>
          <Text // text "more than tickets"
            fontSize={40}
            fontWeight={800}
            color="white"
            marginLeft={90}
            marginTop={30}
          >
            More than just tickets.
          </Text>
          <Text marginLeft={90} fontSize={20} color="white" fontWeight={600}>
            Purchase your NFT ticket today, hold it forever
          </Text>
        </Box>
        <Image src={"/wave.svg"} position="absolute" bottom={0} />
      </Box>
      <Image //svg of people cheering
        src="/crowd3.svg"
        alt="crowd3"
        position={"absolute"}
        right={0}
        bottom={-320}
        w={800}
      />
      <Image // second svg of people cheering
        src="/crowd2.svg"
        alt="crowd2"
        position={"absolute"}
        right={800}
        bottom={-350}
        w={300}
      />
    </Flex>
  );
};
export default NavBar;

Answer 1

This likely has to do with the Theme object. Try importing ChakraProvider at the top of your file and wrap it around the NavBar you're testing.