init rtl

src/__tests__/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

src/components/heading/__tests__/index.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, test } from '@jest/globals';
+import Heading from '../index';
+import { HeadingVariant } from '../types';
+
+describe('Heading', () => {
+  test('рендерит children', () => {
+    const children = 'Hello';
+    render(<Heading>{children}</Heading>);
+
+    const headingEl = screen.getByText(children);
+    expect(headingEl).toBeInTheDocument();
+  });
+
+  test('может рендерится как h2, h3 и h4', () => {
+    const { rerender } = render(<Heading variant={HeadingVariant.h2}>Hello</Heading>);
+
+    let headingEl = screen.getByRole('heading', {
+      level: 2
+    });
+    expect(headingEl).toBeInTheDocument();
+
+    rerender(<Heading variant={HeadingVariant.h3}>Hello</Heading>);
+
+    headingEl = screen.getByRole('heading', {
+      level: 3
+    });
+    expect(headingEl).toBeInTheDocument();
+
+    rerender(<Heading variant={HeadingVariant.h4}>Hello</Heading>);
+
+    headingEl = screen.getByRole('heading', {
+      level: 4
+    });
+    expect(headingEl).toBeInTheDocument();
+  });
+});