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

Question

I have a login page as

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;

and I want to do a snapshot test for this page using jest.

I created Login.test.tsx as

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

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

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

Is this a right approach to test web pages created using chakra-ui?

Answer 1

What you can do is create a customer render where you'll put all your providers.

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

If you want to do snapshot testing you can do it like that 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();
    });
});