[{"data":1,"prerenderedAt":398},["ShallowReactive",2],{"term-t\u002Ftesting-library":3,"related-t\u002Ftesting-library":379},{"id":4,"title":5,"acronym":6,"body":7,"category":360,"description":361,"difficulty":362,"extension":363,"letter":364,"meta":365,"navigation":112,"path":366,"related":367,"seo":373,"sitemap":374,"stem":377,"subcategory":6,"__hash__":378},"terms\u002Fterms\u002Ft\u002Ftesting-library.md","Testing Library",null,{"type":8,"value":9,"toc":354},"minimark",[10,15,19,23,26,30,343,347,350],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Testing Library is a set of utilities that helps you test your UI the way a user would — by finding elements by their text or label, not by CSS class or ID. The motto: 'The more your tests resemble the way your software is used, the more confidence they give you.'",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Testing Library (@testing-library) is a family of packages (React Testing Library, Vue Testing Library, etc.) that provides utilities for testing UI components in a user-centric way. It encourages querying the DOM by role, label, and text rather than implementation details.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-jsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { render, screen, fireEvent } from '@testing-library\u002Freact';\nimport LoginForm from '.\u002FLoginForm';\n\ntest('submits with email and password', async () => {\n  render(\u003CLoginForm onSubmit={jest.fn()} \u002F>);\n  await userEvent.type(screen.getByLabelText('Email'), 'test@test.com');\n  await userEvent.type(screen.getByLabelText('Password'), 'secret');\n  await userEvent.click(screen.getByRole('button', { name: 'Log in' }));\n});\n","jsx","",[38,39,40,87,107,114,146,188,236,279,333],"code",{"__ignoreMap":36},[41,42,45,49,53,57,60,63,65,68,71,74,77,81,84],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"s7zQu","import",[41,50,52],{"class":51},"sMK4o"," {",[41,54,56],{"class":55},"sTEyZ"," render",[41,58,59],{"class":51},",",[41,61,62],{"class":55}," screen",[41,64,59],{"class":51},[41,66,67],{"class":55}," fireEvent",[41,69,70],{"class":51}," }",[41,72,73],{"class":47}," from",[41,75,76],{"class":51}," '",[41,78,80],{"class":79},"sfazB","@testing-library\u002Freact",[41,82,83],{"class":51},"'",[41,85,86],{"class":51},";\n",[41,88,90,92,95,98,100,103,105],{"class":43,"line":89},2,[41,91,48],{"class":47},[41,93,94],{"class":55}," LoginForm ",[41,96,97],{"class":47},"from",[41,99,76],{"class":51},[41,101,102],{"class":79},".\u002FLoginForm",[41,104,83],{"class":51},[41,106,86],{"class":51},[41,108,110],{"class":43,"line":109},3,[41,111,113],{"emptyLinePlaceholder":112},true,"\n",[41,115,117,121,124,126,129,131,133,137,140,143],{"class":43,"line":116},4,[41,118,120],{"class":119},"s2Zo4","test",[41,122,123],{"class":55},"(",[41,125,83],{"class":51},[41,127,128],{"class":79},"submits with email and password",[41,130,83],{"class":51},[41,132,59],{"class":51},[41,134,136],{"class":135},"spNyl"," async",[41,138,139],{"class":51}," ()",[41,141,142],{"class":135}," =>",[41,144,145],{"class":51}," {\n",[41,147,149,152,155,158,162,165,168,171,174,177,180,183,186],{"class":43,"line":148},5,[41,150,151],{"class":119},"  render",[41,153,123],{"class":154},"swJcz",[41,156,157],{"class":51},"\u003C",[41,159,161],{"class":160},"sBMFI","LoginForm",[41,163,164],{"class":135}," onSubmit",[41,166,167],{"class":51},"={",[41,169,170],{"class":55},"jest",[41,172,173],{"class":51},".",[41,175,176],{"class":119},"fn",[41,178,179],{"class":55},"()",[41,181,182],{"class":51},"} \u002F>",[41,184,185],{"class":154},")",[41,187,86],{"class":51},[41,189,191,194,197,199,202,204,207,209,212,214,216,219,221,223,225,227,230,232,234],{"class":43,"line":190},6,[41,192,193],{"class":47},"  await",[41,195,196],{"class":55}," userEvent",[41,198,173],{"class":51},[41,200,201],{"class":119},"type",[41,203,123],{"class":154},[41,205,206],{"class":55},"screen",[41,208,173],{"class":51},[41,210,211],{"class":119},"getByLabelText",[41,213,123],{"class":154},[41,215,83],{"class":51},[41,217,218],{"class":79},"Email",[41,220,83],{"class":51},[41,222,185],{"class":154},[41,224,59],{"class":51},[41,226,76],{"class":51},[41,228,229],{"class":79},"test@test.com",[41,231,83],{"class":51},[41,233,185],{"class":154},[41,235,86],{"class":51},[41,237,239,241,243,245,247,249,251,253,255,257,259,262,264,266,268,270,273,275,277],{"class":43,"line":238},7,[41,240,193],{"class":47},[41,242,196],{"class":55},[41,244,173],{"class":51},[41,246,201],{"class":119},[41,248,123],{"class":154},[41,250,206],{"class":55},[41,252,173],{"class":51},[41,254,211],{"class":119},[41,256,123],{"class":154},[41,258,83],{"class":51},[41,260,261],{"class":79},"Password",[41,263,83],{"class":51},[41,265,185],{"class":154},[41,267,59],{"class":51},[41,269,76],{"class":51},[41,271,272],{"class":79},"secret",[41,274,83],{"class":51},[41,276,185],{"class":154},[41,278,86],{"class":51},[41,280,282,284,286,288,291,293,295,297,300,302,304,307,309,311,313,316,319,321,324,326,328,331],{"class":43,"line":281},8,[41,283,193],{"class":47},[41,285,196],{"class":55},[41,287,173],{"class":51},[41,289,290],{"class":119},"click",[41,292,123],{"class":154},[41,294,206],{"class":55},[41,296,173],{"class":51},[41,298,299],{"class":119},"getByRole",[41,301,123],{"class":154},[41,303,83],{"class":51},[41,305,306],{"class":79},"button",[41,308,83],{"class":51},[41,310,59],{"class":51},[41,312,52],{"class":51},[41,314,315],{"class":154}," name",[41,317,318],{"class":51},":",[41,320,76],{"class":51},[41,322,323],{"class":79},"Log in",[41,325,83],{"class":51},[41,327,70],{"class":51},[41,329,330],{"class":154},"))",[41,332,86],{"class":51},[41,334,336,339,341],{"class":43,"line":335},9,[41,337,338],{"class":51},"}",[41,340,185],{"class":55},[41,342,86],{"class":51},[11,344,346],{"id":345},"when-youll-hear-this","When You'll Hear This",[16,348,349],{},"\"Use getByRole instead of getByTestId — Testing Library's philosophy.\" \u002F \"React Testing Library is the standard for testing React components.\"",[351,352,353],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":89,"depth":89,"links":355},[356,357,358,359],{"id":13,"depth":89,"text":14},{"id":21,"depth":89,"text":22},{"id":28,"depth":89,"text":29},{"id":345,"depth":89,"text":346},"testing","Testing Library is a set of utilities that helps you test your UI the way a user would — by finding elements by their text or label, not by CSS class or ID...","intermediate","md","t",{},"\u002Fterms\u002Ft\u002Ftesting-library",[368,369,370,371,372],"Jest","Vitest","Unit Test","Snapshot Test","Accessibility",{"title":5,"description":361},{"changefreq":375,"priority":376},"weekly",0.7,"terms\u002Ft\u002Ftesting-library","okkPXG2XeYrwkr-pl1yy0mhmOS-6bNMGrwTCVl6e12U",[380,385,389,392,395],{"title":372,"path":381,"acronym":382,"category":383,"difficulty":362,"description":384},"\u002Fterms\u002Fa\u002Faccessibility","a11y","frontend","Accessibility (a11y) is making your website usable by everyone — including people using screen readers, keyboard-only navigation, or who have low vision.",{"title":368,"path":386,"acronym":6,"category":360,"difficulty":387,"description":388},"\u002Fterms\u002Fj\u002Fjest","beginner","Jest is the most popular JavaScript testing framework.",{"title":371,"path":390,"acronym":6,"category":360,"difficulty":387,"description":391},"\u002Fterms\u002Fs\u002Fsnapshot-test","A snapshot test takes a photo of your component's output and saves it. Next time you run it, it takes another photo and compares them.",{"title":370,"path":393,"acronym":6,"category":360,"difficulty":387,"description":394},"\u002Fterms\u002Fu\u002Funit-test","A unit test is like checking that one single LEGO brick isn't broken before you use it in your big castle.",{"title":369,"path":396,"acronym":6,"category":360,"difficulty":387,"description":397},"\u002Fterms\u002Fv\u002Fvitest","Vitest is a blazing-fast test runner built on Vite. If Jest is the reliable sedan, Vitest is the electric sports car — same driving experience, 10x faster.",1776518318654]