在 next.js 应用程序中使用 jest 测试 chakra-ui

Question

我有一个登录页面

import { Flex, Stack, FormControl, FormLabel, Input, FormHelperText } from '@chakra-ui/react'
import type { NextPage } from 'next'

const Login: NextPage = () => {
  return (
    <Flex h="100vh" w="100vw" justifyContent="center" alignItems="center">
      <Stack>
        <FormControl>
          <FormLabel>Email address</FormLabel>
          <Input type='email' />
          <FormHelperText>We'll never share your email.</FormHelperText>
          </FormControl>
      </Stack>
    </Flex>
  );
};

export default Login;

我想使用 jest 对此页面进行快照测试。

我将Login.test.tsx创建为

import { render } from '@testing-library/react';

import Login from '../pages/Login';

describe('Login', () => {
    it('renders correctly', () => {
        const { container } = render(<Login />);
        expect(container).toMatchSnapshot();
    });
});

这是测试使用 chakra-ui 创建的 web 个页面的正确方法吗？

Answer 1

您可以做的是创建一个客户渲染，您将在其中放置所有提供者。

https://testing-library.com/docs/react-testing-library/setup

如果你想做快照测试，你可以这样做https://testing-library.com/docs/react-testing-library/api/#render

import { render } from '@testing-library/react';

import Login from '../pages/Login';

describe('Login', () => {
    it('renders correctly', () => {
        const { asFragment } = render(<ChakraProvider><Login /></ChakraProvider>);
        expect(asFragment()).toMatchSnapshot();
    });
});