nextJS + chakra-UI 项目的单元测试

Question

我正在做一个 NextJS + chakra-UI 项目，到目前为止我找不到任何关于如何获取 jest 和 react-testing 库来理解脉轮的方式的信息-UI 渲染组件。我的测试不断抛出 errors，如下所示：

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

当我制作一个 react jsx 元素时，没有组件 chakra 提供测试正确执行。是否有任何来源解释如何在这种情况下进行设置？

编辑这是测试文件：

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

这是包含脉轮主题对象和包装器的 _app：

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

这是导航栏组件：

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

这可能与主题对象有关。尝试在文件顶部导入 ChakraProvider 并将其环绕在您正在测试的 NavBar 周围。

nextJS + chakra-UI 项目的单元测试

unit testing on nextJS + chakra-UI project

reactjs

next.js

chakra-ui