init rtl

jest.config.js

@@ -134,7 +134,7 @@ const config = {
   // setupFiles: [],
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
-  // setupFilesAfterEnv: [],
+  setupFilesAfterEnv: ['<rootDir>/src/__tests__/setup.ts'],
 
   // The number of seconds after which a test is considered as slow and reported as such in the results.
   // slowTestThreshold: 5,

package-lock.json

@@ -24,6 +24,9 @@
             },
             "devDependencies": {
                 "@eslint/js": "^9.14.0",
+                "@testing-library/dom": "^10.4.0",
+                "@testing-library/jest-dom": "^6.6.3",
+                "@testing-library/react": "^16.1.0",
                 "@types/jest": "^29.5.14",
                 "@types/react": "^18.3.12",
                 "@types/react-dom": "^18.3.1",
@@ -40,6 +43,13 @@
                 "typescript-eslint": "^8.13.0"
             }
         },
+        "node_modules/@adobe/css-tools": {
+            "version": "4.4.1",
+            "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.1.tgz",
+            "integrity": "sha512-12WGKBQzjUAI4ayyF4IAtfw2QR/IDoqk6jTddXDhtYTJF9ASmoE1zst7cVtP0aL/F1jUJL5r+JxKXKEgHNbEUQ==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/@ampproject/remapping": {
             "version": "2.3.0",
             "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -3425,6 +3435,216 @@
             "license": "MIT",
             "optional": true
         },
+        "node_modules/@testing-library/dom": {
+            "version": "10.4.0",
+            "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
+            "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/code-frame": "^7.10.4",
+                "@babel/runtime": "^7.12.5",
+                "@types/aria-query": "^5.0.1",
+                "aria-query": "5.3.0",
+                "chalk": "^4.1.0",
+                "dom-accessibility-api": "^0.5.9",
+                "lz-string": "^1.5.0",
+                "pretty-format": "^27.0.2"
+            },
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@testing-library/dom/node_modules/ansi-styles": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+            "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "color-convert": "^2.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/@testing-library/dom/node_modules/aria-query": {
+            "version": "5.3.0",
+            "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+            "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "dequal": "^2.0.3"
+            }
+        },
+        "node_modules/@testing-library/dom/node_modules/chalk": {
+            "version": "4.1.2",
+            "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+            "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-styles": "^4.1.0",
+                "supports-color": "^7.1.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/chalk?sponsor=1"
+            }
+        },
+        "node_modules/@testing-library/dom/node_modules/pretty-format": {
+            "version": "27.5.1",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+            "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-regex": "^5.0.1",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^17.0.1"
+            },
+            "engines": {
+                "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+            }
+        },
+        "node_modules/@testing-library/dom/node_modules/pretty-format/node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/@testing-library/dom/node_modules/react-is": {
+            "version": "17.0.2",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+            "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@testing-library/dom/node_modules/supports-color": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+            "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "has-flag": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/@testing-library/jest-dom": {
+            "version": "6.6.3",
+            "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.6.3.tgz",
+            "integrity": "sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@adobe/css-tools": "^4.4.0",
+                "aria-query": "^5.0.0",
+                "chalk": "^3.0.0",
+                "css.escape": "^1.5.1",
+                "dom-accessibility-api": "^0.6.3",
+                "lodash": "^4.17.21",
+                "redent": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=14",
+                "npm": ">=6",
+                "yarn": ">=1"
+            }
+        },
+        "node_modules/@testing-library/jest-dom/node_modules/ansi-styles": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+            "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "color-convert": "^2.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/@testing-library/jest-dom/node_modules/chalk": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+            "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-styles": "^4.1.0",
+                "supports-color": "^7.1.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
+            "version": "0.6.3",
+            "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+            "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@testing-library/jest-dom/node_modules/supports-color": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+            "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "has-flag": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/@testing-library/react": {
+            "version": "16.1.0",
+            "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.1.0.tgz",
+            "integrity": "sha512-Q2ToPvg0KsVL0ohND9A3zLJWcOXXcO8IDu3fj11KhNt0UlCWyFyvnCIBkd12tidB2lkiVRG8VFqdhcqhqnAQtg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.12.5"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "peerDependencies": {
+                "@testing-library/dom": "^10.0.0",
+                "@types/react": "^18.0.0 || ^19.0.0",
+                "@types/react-dom": "^18.0.0 || ^19.0.0",
+                "react": "^18.0.0 || ^19.0.0",
+                "react-dom": "^18.0.0 || ^19.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@tootallnate/once": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -3442,6 +3662,13 @@
             "license": "MIT",
             "optional": true
         },
+        "node_modules/@types/aria-query": {
+            "version": "5.0.4",
+            "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+            "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/@types/babel__core": {
             "version": "7.20.5",
             "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -5596,6 +5823,13 @@
                 "node": ">=10"
             }
         },
+        "node_modules/css.escape": {
+            "version": "1.5.1",
+            "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+            "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/cssesc": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -5939,6 +6173,16 @@
                 "node": ">= 0.8"
             }
         },
+        "node_modules/dequal": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+            "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/destroy": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -6026,6 +6270,13 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/dom-accessibility-api": {
+            "version": "0.5.16",
+            "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+            "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/domexception": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
@@ -8495,6 +8746,16 @@
                 "node": ">=0.8.19"
             }
         },
+        "node_modules/indent-string": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+            "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/inflight": {
             "version": "1.0.6",
             "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -11052,6 +11313,13 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/lodash": {
+            "version": "4.17.21",
+            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/lodash.debounce": {
             "version": "4.0.8",
             "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -11086,6 +11354,16 @@
                 "yallist": "^3.0.2"
             }
         },
+        "node_modules/lz-string": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+            "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "lz-string": "bin/bin.js"
+            }
+        },
         "node_modules/make-dir": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
@@ -11232,6 +11510,16 @@
                 "node": ">=6"
             }
         },
+        "node_modules/min-indent": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+            "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/minimalistic-assert": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -12716,6 +13004,20 @@
                 "recursive-watch": "bin.js"
             }
         },
+        "node_modules/redent": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+            "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "indent-string": "^4.0.0",
+                "strip-indent": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/redux": {
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
@@ -13622,6 +13924,19 @@
                 "node": ">=6"
             }
         },
+        "node_modules/strip-indent": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+            "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "min-indent": "^1.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/strip-json-comments": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",

package.json

@@ -29,6 +29,9 @@
     },
     "devDependencies": {
         "@eslint/js": "^9.14.0",
+        "@testing-library/dom": "^10.4.0",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "^16.1.0",
         "@types/jest": "^29.5.14",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",

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