[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fa-modern-guide-to-react-unit-testing":663,"blog-author-\u002Fblog\u002Fa-modern-guide-to-react-unit-testing":1361,"i-material-symbols:arrow-back-rounded":1376},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Sign in","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","VdirGIa8cUm6xLprbBeTKcw914JfyJjWfF-9hSVOX5Y",{"id":87,"extension":5,"links":88,"meta":660,"stem":661,"__hash__":662},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,295,299,303,306,310,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,453,457,461,465,469,473,477,480,483,486,489,493,497,500,504,508,512,516,520,524,528,532,536,540,544,548,551,555,559,563,567,571,574,577,580,584,587,591,595,599,603,606,610,614,617,620,623,627,631,635,638,641,644,648,652,656],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":209,"label":210,"href":211},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":213,"label":214,"href":215},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":217,"label":218,"href":219},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":221,"label":222,"href":223},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":225,"label":226,"href":227},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":229,"label":230,"href":231},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":233,"label":234,"href":235},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":237,"label":238,"href":239},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":241,"label":242,"href":243},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":245,"label":246,"href":247},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":249,"label":250,"href":251},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":253,"label":254,"href":255},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":257,"label":258,"href":259},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":261,"label":262,"href":263},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":265,"label":266,"href":267},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":269,"label":270,"href":271},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":273,"label":274,"href":275},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":277,"label":278,"href":279},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":281,"label":282,"href":283},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":285,"label":286,"href":287},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":289,"label":290,"href":291},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":293,"label":294,"href":92},"docs.desktop.download","Desktop download docs",{"key":296,"label":297,"href":298},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":300,"label":301,"href":302},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":304,"label":305,"href":207},"docs.piecesOS.install","PiecesOS install docs",{"key":307,"label":308,"href":309},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":311,"label":312,"href":313},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":315,"label":316,"href":317},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":319,"label":320,"href":321},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":323,"label":324,"href":325},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":327,"label":328,"href":329},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":331,"label":332,"href":333},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":335,"label":336,"href":337},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":343,"label":344,"href":345},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":347,"label":348,"href":349},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":351,"label":352,"href":353},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":355,"label":356,"href":357},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":359,"label":360,"href":361},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":363,"label":364,"href":365},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":367,"label":368,"href":369},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":371,"label":372,"href":373},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":375,"label":376,"href":377},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":379,"label":380,"href":381},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":383,"label":384,"href":385},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":387,"label":388,"href":389},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":391,"label":392,"href":393},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":395,"label":396,"href":397},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":399,"label":400,"href":401},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":403,"label":404,"href":405},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":407,"label":408,"href":409},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":411,"label":412,"href":413},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":415,"label":416,"href":417},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":419,"label":420,"href":421},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":423,"label":424,"href":425},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":427,"label":428,"href":429},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":431,"label":432,"href":433},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":435,"label":436,"href":437},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":439,"label":440,"href":441},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":443,"label":444,"href":445},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":447,"label":448,"href":449},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":451,"label":58,"href":452},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":454,"label":455,"href":456},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":458,"label":459,"href":460},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":462,"label":463,"href":464},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":466,"label":467,"href":468},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":470,"label":471,"href":472},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":474,"label":475,"href":476},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":478,"label":34,"href":479},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":481,"label":43,"href":482},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":484,"label":46,"href":485},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":487,"label":488,"href":485},"social.twitter","Twitter",{"key":490,"label":491,"href":492},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":494,"label":495,"href":496},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":498,"label":49,"href":499},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":501,"label":502,"href":503},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":505,"label":506,"href":507},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":509,"label":510,"href":511},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":513,"label":514,"href":515},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":517,"label":518,"href":519},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":521,"label":522,"href":523},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":525,"label":526,"href":527},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":529,"label":530,"href":531},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":533,"label":534,"href":535},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":537,"label":538,"href":539},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":541,"label":542,"href":543},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":545,"label":546,"href":547},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":549,"label":550,"href":247},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":552,"label":553,"href":554},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":556,"label":557,"href":558},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":560,"label":561,"href":562},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":564,"label":565,"href":566},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":568,"label":569,"href":570},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":572,"label":573,"href":66},"legal.privacyPolicy","Privacy policy",{"key":575,"label":576,"href":69},"legal.refundPolicy","Refund policy",{"key":578,"label":579,"href":72},"legal.terms","Terms",{"key":581,"label":582,"href":583},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":585,"label":586,"href":503},"videos.youtubeChannel","YouTube channel",{"key":588,"label":589,"href":590},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":592,"label":593,"href":594},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":596,"label":597,"href":598},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":600,"label":601,"href":602},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":604,"label":605,"href":519},"sales.feedback","Feedback discussions",{"key":607,"label":608,"href":609},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":611,"label":612,"href":613},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":615,"label":616,"href":19},"routes.home","Home route",{"key":618,"label":619,"href":56},"routes.about","About route",{"key":621,"label":622,"href":12},"routes.downloads","Downloads route",{"key":624,"label":625,"href":626},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":628,"label":629,"href":630},"routes.pricing","Pricing route","\u002Fpricing",{"key":632,"label":633,"href":634},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":636,"label":637,"href":22},"routes.enterprise","Enterprise route",{"key":639,"label":640,"href":62},"routes.contact","Contact route",{"key":642,"label":643,"href":59},"routes.updates","Updates route",{"key":645,"label":646,"href":647},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":649,"label":650,"href":651},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":653,"label":654,"href":655},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":657,"label":658,"href":659},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","NLkVE1lIUws518K-1QsSB6T-GvlXYIzcRL1HDhqarGQ",{"id":664,"title":665,"author":666,"authorPhoto":667,"authorPhotoAlt":668,"authorSlug":669,"body":670,"buttonText":1347,"buttonUrl":1295,"category":1348,"date":1349,"description":1350,"draft":1351,"editorsPick":1351,"extension":1352,"featured":1351,"image":1353,"imageAlt":1354,"meta":1355,"navigation":32,"ogImage":1356,"ogImageAlt":1356,"path":1357,"seo":1358,"stem":1359,"tags":1356,"__hash__":1360},"blog\u002Fblog\u002Fa-modern-guide-to-react-unit-testing.md","A Modern guide to React unit testing","James Amoo","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Ftailwind-theming-create-light-and-dark-modes\u002Fauthor.jpeg","Photo of James Amoo.","james-amoo",{"type":671,"value":672,"toc":1328},"minimark",[673,685,688,701,706,709,741,745,752,759,762,782,786,789,804,808,822,827,851,860,871,878,884,887,890,896,899,902,908,919,925,929,932,936,939,954,960,966,972,975,979,982,991,998,1013,1016,1019,1025,1032,1035,1038,1044,1065,1071,1078,1093,1104,1108,1111,1117,1131,1134,1140,1143,1152,1155,1159,1167,1170,1174,1181,1187,1193,1199,1217,1224,1227,1232,1238,1243,1250,1256,1267,1272,1277,1280,1283,1287,1290,1299,1302],[674,675,676,677,684],"p",{},"Testing, which is a stage in the ",[678,679,683],"a",{"href":680,"rel":681},"https:\u002F\u002Faws.amazon.com\u002Fwhat-is\u002Fsdlc\u002F",[682],"nofollow","Software Development Life Cycle (SLDC)",", is a concept that may be new to developers who haven't pushed a product live or beginners who are still in the bubble of personal projects and tutorials. It entails testing code for bugs and determining whether or not it meets the customer's requirements.",[674,686,687],{},"Software development does not stop at writing code! A few other questions need to be answered in order for that code to be successful. Does the code work? Does it meet the customers' standards? Is it error-free? All these have to be properly addressed at the software testing stages before pushing the codebase to production.",[674,689,690,695,696,700],{},[678,691,694],{"href":692,"rel":693},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FUnit_testing",[682],"Unit testing",", one of the types of software testing, means testing the functionality of a particular component in isolation, or as a ",[697,698,699],"strong",{},"unit",". In this tutorial, you will learn all about React unit testing, how to write unit tests in React, how to install the Jest testing library, snapshot testing, and how to implement snapshot testing in React.",[702,703,705],"h2",{"id":704},"prerequisites","Prerequisites",[674,707,708],{},"This tutorial will be explained in straightforward terms for easy comprehension, but to properly follow it, you must possess knowledge of the following:",[710,711,712,720,727,734],"ul",{},[713,714,715],"li",{},[678,716,719],{"href":717,"rel":718},"https:\u002F\u002Fpieces.app\u002Fblog\u002Fintroduction-to-html",[682],"HTML",[713,721,722],{},[678,723,726],{"href":724,"rel":725},"https:\u002F\u002Fpieces.app\u002Fblog\u002Fstyling-text-in-css",[682],"CSS",[713,728,729],{},[678,730,733],{"href":731,"rel":732},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FLearn\u002FJavaScript\u002FFirst_steps\u002FWhat_is_JavaScript",[682],"JavaScript",[713,735,736],{},[678,737,740],{"href":738,"rel":739},"https:\u002F\u002Freact.dev\u002F",[682],"React",[702,742,744],{"id":743},"what-is-unit-testing-and-why-is-it-important","What is unit testing and why is it important?",[674,746,747,748,751],{},"Consider a scenario where you have a particular codebase and to make things easier, you choose to separate sections or components of the codebase to test for errors. This procedure is known as ",[697,749,750],{},"unit testing",".",[674,753,754,755,758],{},"It is a type of software testing where code is separated into units and each unit is tested ",[697,756,757],{},"individually"," to ensure it runs as expected.",[674,760,761],{},"Unit testing is an important stage in software development for the following reasons:",[710,763,764,770,776],{},[713,765,766,769],{},[697,767,768],{},"Improves Quality and Maintainability of your Codebase",": Writing unit tests improves the quality and maintainability of your codebase by making it less prone to error. Having to run into several bugs in the course of maintaining code may be exhausting, especially over a long period. Writing good unit tests fixes this. Also, writing tests enables flexibility in coding since the developers will be alerted as soon as bugs (code that contradicts the tests that have been written) are spotted.",[713,771,772,775],{},[697,773,774],{},"It serves as documentation for your Codebase:"," By explicitly writing tests that define how a piece of code should behave, it provides context that you would normally add at the documentation stage of software development. However, with the help of Pieces for Developers, you can do that long process and easily allow the app to provide context for you by simply copying the piece of code.",[713,777,778,781],{},[697,779,780],{},"Improved Understanding of Codebase",": Separating each component into individual components and treating each as a unit helps developers have a proper understanding of the codebase since each unit will have to be properly assessed and tested for errors.",[702,783,785],{"id":784},"structure-of-unit-testing-in-react","Structure of unit testing in React",[674,787,788],{},"Whether you're writing React unit tests for your project or a production-level codebase, it follows these key steps:",[790,791,792,795,798],"ol",{},[713,793,794],{},"Configure the necessary dependencies for testing.",[713,796,797],{},"Give an instance or a simulation of a user's interaction. This may include manually calling a function that would be normally triggered when a button is clicked on.",[713,799,800,801,751],{},"Write an assertion based on the behavior of the particular component. ",[697,802,803],{},"A test is successfully passed if the result matches the expected outcome",[702,805,807],{"id":806},"installation-of-react-testing-libraries","Installation of React testing libraries",[674,809,810,811,816,817,751],{},"To implement unit testing in React, we will be using two of the most popular React testing libraries, ",[678,812,815],{"href":813,"rel":814},"https:\u002F\u002Fjestjs.io\u002F",[682],"Jest"," and ",[678,818,821],{"href":819,"rel":820},"https:\u002F\u002Fenzymejs.github.io\u002Fenzyme\u002F",[682],"Enzyme",[823,824,826],"h3",{"id":825},"jest-unit-testing","Jest unit testing",[674,828,829,832,833,838,839,844,845,850],{},[678,830,815],{"href":813,"rel":831},[682]," is a ",[678,834,837],{"href":835,"rel":836},"https:\u002F\u002Ftesting-library.com\u002F",[682],"testing library"," for JavaScript and its frameworks. It supports React, ",[678,840,843],{"href":841,"rel":842},"https:\u002F\u002Fvuejs.org\u002F",[682],"Vue",", and ",[678,846,849],{"href":847,"rel":848},"https:\u002F\u002Fangular.io\u002F",[682],"Angular",". It is designed to ensure correctness in any JavaScript codebase.",[674,852,853,854,859],{},"We can use Jest in our application by opening our terminal and installing it from ",[678,855,858],{"href":856,"rel":857},"https:\u002F\u002Fwww.npmjs.com\u002F",[682],"Node Package Manager (NPM)"," using the following line of code:",[861,862,867],"pre",{"className":863,"code":865,"language":866},[864],"language-text","npm install --save-dev jest @testing-library\u002Fjest-dom\n","text",[868,869,865],"code",{"__ignoreMap":870},"",[674,872,873,874,877],{},"After this, we can proceed to add some extra configurations to our ",[868,875,876],{},"package.json"," folder:",[861,879,882],{"className":880,"code":881,"language":866},[864],"{\n  \"scripts\": {\n    \"test\": \"jest\"\n  }\n}\n",[868,883,881],{"__ignoreMap":870},[674,885,886],{},"And we're set! We can then proceed to Jest for unit testing of our codebase. But first, let's see how we would install Enzyme in our application.",[823,888,821],{"id":889},"enzyme",[674,891,892,895],{},[678,893,821],{"href":819,"rel":894},[682]," is a JavaScript testing tool made specifically to test React components and perform other unit testing exercises.",[674,897,898],{},"Using Enzyme and Jest together is the most seamless method for testing your React components.",[674,900,901],{},"You can install Enzyme by opening your terminal and running the following line of code:",[861,903,906],{"className":904,"code":905,"language":866},[864],"npm i --save-dev enzyme enzyme-adapter-react-16\n",[868,907,905],{"__ignoreMap":870},[674,909,910,911,914,915,918],{},"Note that you install the version of Enzyme that corresponds with your version of React. In this article, we will be using React version 16, hence the specification of ",[868,912,913],{},"react-16",". We can then proceed to make further configurations to the Enzyme Adapter in your ",[868,916,917],{},"App.js"," file:",[861,920,923],{"className":921,"code":922,"language":866},[864],"import Enzyme from 'enzyme';\nimport Adapter from 'enzyme-adapter-react-16';\nEnzyme.configure({ adapter: new Adapter() });\n",[868,924,922],{"__ignoreMap":870},[702,926,928],{"id":927},"writing-a-unit-test-in-react","Writing a unit test in React",[674,930,931],{},"In this section, we will write our first unit test with a sample project but first, we have to create a new React Application.",[823,933,935],{"id":934},"scaffolding-react-application","Scaffolding React application",[674,937,938],{},"We can create a new React app by following these steps:",[790,940,941],{},[713,942,943,944,947,948,953],{},"Open your terminal and run the command below to create a new React application called ",[868,945,946],{},"pieces-test-tutorial",". We will be using ",[678,949,952],{"href":950,"rel":951},"https:\u002F\u002Fnextjs.org\u002F",[682],"Next.js"," as our build tool.",[861,955,958],{"className":956,"code":957,"language":866},[864],"npx create-next-app  pieces-test-tutorial\n",[868,959,957],{"__ignoreMap":870},[790,961,963],{"start":962},2,[713,964,965],{},"Define a custom directory and then proceed with the run command so our app runs on the browser.",[861,967,970],{"className":968,"code":969,"language":866},[864],"cd pieces-test-tutorialnpm run dev\n",[868,971,969],{"__ignoreMap":870},[674,973,974],{},"And we’re set! Now let's work with some mock content.",[823,976,978],{"id":977},"creating-demo-project","Creating demo project",[674,980,981],{},"In this section, we want to perform React component testing that confirms if a string of text is present within an element. If there is a match, the test passes; otherwise, it fails.",[674,983,984,985,990],{},"Let's start by creating our text component. Rather than manually create the component, I will use the ",[678,986,989],{"href":987,"rel":988},"https:\u002F\u002Fcode.pieces.app\u002Fblog\u002Fintroducing-pieces-copilot",[682],"Pieces Copilot"," which generates the code snippets for me. All I have to do is ask!",[674,992,993],{},[994,995],"img",{"alt":996,"src":997},"Pieces Copilot in action!","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fa-modern-guide-to-react-unit-testing\u002Fimg-001.png",[674,999,1000,1001,1005,1006,1005,1009,1012],{},"Here, I made a quick request to the Pieces Copilot to ",[1002,1003,1004],"em",{},"Generate a React Code that has a"," ",[868,1007,1008],{},"TestFile",[1002,1010,1011],{},"function that outputs the text \"Copy and Save code snippets with Pieces\","," and it does that perfectly!",[674,1014,1015],{},"Now we can proceed to use the snippet.",[674,1017,1018],{},"Here's the generated snippet from the Pieces Copilot:",[861,1020,1023],{"className":1021,"code":1022,"language":866},[864],"import React from 'react';\nfunction TestFile() {\n  return (\n      Copy and Save code snippets with Pieces    \n  );\n}\nexport default TestFile;\n",[868,1024,1022],{"__ignoreMap":870},[674,1026,1027,1028,1031],{},"Here's a simple component named ",[868,1029,1030],{},"TestFile.js"," that renders a text that says \"Copy and save code snippets with Pieces\", which is one of the use cases of the Pieces for Developers App.",[674,1033,1034],{},"Now, we want to run a test that confirms that the text is present in the element.",[674,1036,1037],{},"We proceed by creating our test setup file. First, let's import the necessary packages.",[861,1039,1042],{"className":1040,"code":1041,"language":866},[864],"import \"@testing-library\u002Fjest-dom\";\nimport { render, screen } from \"@testing-library\u002Freact\";\nimport TestFile from \".\u002FTestFile.js\";\n",[868,1043,1041],{"__ignoreMap":870},[674,1045,1046,1047,816,1050,1053,1054,816,1057,1060,1061,1064],{},"Here, we import the testing library from ",[868,1048,1049],{},"jest-dom",[868,1051,1052],{},"jest"," which we installed through our terminal earlier, also the ",[868,1055,1056],{},"render",[868,1058,1059],{},"screen"," methods that we will be using to perform the text comparison to ensure there is a match. We create a ",[868,1062,1063],{},".test.js"," file in our root folder and configure it like this:",[861,1066,1069],{"className":1067,"code":1068,"language":866},[864],"import \"@testing-library\u002Fjest-dom\";\nimport React from \"react\";\nimport { render, screen } from \"@testing-library\u002Freact\";\nimport TestFile from \".\u002FTestFile.js\";\ntest(\"Text matches\", () => {\n  render();\n  const messageElement = screen.getByText(\u002FHello, World!\u002Fi);\n  expect(messageElement).toBeInTheDocument();\n});\n",[868,1070,1068],{"__ignoreMap":870},[674,1072,1073,1074,1077],{},"Here, we use the ",[868,1075,1076],{},"test()"," method to simulate an interaction. We named the title of our text \"Text matches\" so it could either return a PASS or FAILED depending on whether the test was successful. You can rename the title to one that suits you.",[674,1079,1080,1081,1084,1085,1088,1089,1092],{},"In the function, we render the ",[868,1082,1083],{},"TextFile"," component, as we imported the render method from our ",[868,1086,1087],{},"testing-library"," earlier. After that, we create a variable ",[868,1090,1091],{},"messageElement"," which we use to get the text from the element if it exists (remember it's a test).",[674,1094,1095,1096,1099,1100,1103],{},"Finally, we use the ",[868,1097,1098],{},"expect()"," method to compare if there's a match. We're basically saying \"Hey, I ",[697,1101,1102],{},"expect"," this text to be in the document, can you help me check if it is?\"",[823,1105,1107],{"id":1106},"testing-the-component","Testing the component",[674,1109,1110],{},"Now that we've created our test setup, we can check if there's a match. How do we do this? Jest provides a default test command that performs a quick check on the correctness of a component. Open your terminal and run the test command below:",[861,1112,1115],{"className":1113,"code":1114,"language":866},[864],"npx jest .test.js\n",[868,1116,1114],{"__ignoreMap":870},[674,1118,1119,1120,1122,1123,1126,1127,1130],{},"We're testing the ",[868,1121,1063],{}," file because that's what we named our test file. (Note that it's ",[868,1124,1125],{},"npx,"," not ",[868,1128,1129],{},"npm",".) When we run the command, we get a log report of the test and whether it passes or fails.",[674,1132,1133],{},"Here's what our terminal looks like when we run the command:",[674,1135,1136],{},[994,1137],{"alt":1138,"src":1139},"What our terminal looks like when we run the command.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fa-modern-guide-to-react-unit-testing\u002Fimg-002.png",[674,1141,1142],{},"Here, we see that our test passes as we expect it to because the text matches. If we change any of the characters so that it doesn't match, the test fails.",[674,1144,1145,1146,1148,1149,751],{},"We have successfully run a unit test for our ",[868,1147,1030],{}," component and can confirm that it works. In the terminal, we notice a report that says ",[868,1150,1151],{},"Snapshots: 0 total",[674,1153,1154],{},"What's that about?",[702,1156,1158],{"id":1157},"react-snapshot-testing","React SnapShot testing",[674,1160,1161,1166],{},[678,1162,1165],{"href":1163,"rel":1164},"https:\u002F\u002Fjestjs.io\u002Fdocs\u002Fsnapshot-testing",[682],"Snapshot testing"," deals with a comparison of a particular image of a codebase to the previously saved image of the codebase. If the data in a snapshot matches the data in the previously saved snapshot, the test passes, otherwise it fails. It helps in spotting any changes to the output or unexpected code changes.",[674,1168,1169],{},"Jest helps highlight code differences between two snapshots when compared.",[823,1171,1173],{"id":1172},"snapshot-testing-with-jest","Snapshot testing with Jest",[674,1175,1176,1177,1180],{},"We can implement snapshot testing with Jest in our React application. First, we have to install the ",[868,1178,1179],{},"react-test-renderer","utility that helps render the code at the test. We do that by running the following line of code:",[861,1182,1185],{"className":1183,"code":1184,"language":866},[864],"npm install --save-dev react-test-renderer\n",[868,1186,1184],{"__ignoreMap":870},[674,1188,1189,1190,1192],{},"Now we can proceed to compare snapshots. We start by creating the first instance of a snapshot by making some changes to our ",[868,1191,1063],{}," file as shown below:",[861,1194,1197],{"className":1195,"code":1196,"language":866},[864],"import \"@testing-library\u002Fjest-dom\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport TestFile from \".\u002FTestFile.js\";\ntest(\"renders correctly\", () => {\n  const component = renderer.create();\n  const tree = component.toJSON();\n  expect(tree).toMatchSnapshot();\n});\n",[868,1198,1196],{"__ignoreMap":870},[674,1200,1201,1202,1205,1206,1208,1209,1211,1212],{},"Here, we import the ",[868,1203,1204],{},"renderer"," method from the ",[868,1207,1179],{}," package we installed earlier. Then, we make a snapshot of the ",[868,1210,1008],{}," that we generated with the ",[678,1213,1216],{"href":1214,"rel":1215},"https:\u002F\u002Fpieces.app\u002Ffeatures\u002Fcopilot",[682],"Pieces Copilot.",[674,1218,1219,1220,1223],{},"The text of the element remains unchanged here. We run our test using the ",[868,1221,1222],{},"npm run test"," command.",[674,1225,1226],{},"When we run the command, this is what our terminal looks like:",[674,1228,1229],{},[994,1230],{"alt":870,"src":1231},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fa-modern-guide-to-react-unit-testing\u002Fimg-003.png",[674,1233,1234,1235,1237],{},"Here, we have created the first snapshot. If we run another test, nothing changes because there will be no conflict with the first snapshot. Let's make some changes to our ",[868,1236,1030],{},". I'll just head over to the Pieces Copilot and let it do that for us:",[674,1239,1240],{},[994,1241],{"alt":870,"src":1242},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fa-modern-guide-to-react-unit-testing\u002Fimg-004.png",[674,1244,1245,1246,1249],{},"And there! A new code snippet with the text, ",[1002,1247,1248],{},"\"Convert from one programming language to another using Pieces","\" (another use case of Pieces) is generated. Here's the output:",[861,1251,1254],{"className":1252,"code":1253,"language":866},[864],"import React from 'react';\nfunction TestFile() {\n  return (\n      Convert from one programming language to another using Pieces    \n  );\n}\nexport default TestFile;\n",[868,1255,1253],{"__ignoreMap":870},[674,1257,1258,1259,1262,1263,1266],{},"Now we have different code from the first snapshot. The text of the first snapshot was \"",[1002,1260,1261],{},"Copy and Save code snippets with Pieces","\" whereas this one is \"",[1002,1264,1265],{},"Convert from one programming language to another using Pieces","\"— much different!",[674,1268,1269,1270,1223],{},"Let's take a look at the behavior of the terminal when we try to get another snapshot using the ",[868,1271,1222],{},[674,1273,1274],{},[994,1275],{"alt":870,"src":1276},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fa-modern-guide-to-react-unit-testing\u002Fimg-005.png",[674,1278,1279],{},"Here, we see that our test fails because there's been a text change. The previous snapshot (which serves as a benchmark) is different from the new snapshot. It goes further to highlight the text change and why it failed the test.",[674,1281,1282],{},"This is known as snapshot testing.",[702,1284,1286],{"id":1285},"conclusion","Conclusion",[674,1288,1289],{},"By following this tutorial, you have learned about React unit testing, why it is important, how to write unit tests, how to get started with the Jest and React testing libraries, how to generate code snippets using the Pieces Copilot, the concept of snapshot testing, and how to implement snapshot testing using Jest.",[674,1291,1292,1293,1298],{},"The next step will be to check out other types of test practices in software engineering. You can click here to download the ",[678,1294,1297],{"href":1295,"rel":1296},"https:\u002F\u002Fdocs.pieces.app\u002Finstallation-getting-started\u002Fwhat-am-i-installing",[682],"Pieces Desktop app"," and try out some more exciting stuff. Have fun!",[674,1300,1301],{},"P.S. Not sold on React?",[790,1303,1304,1312,1320],{},[713,1305,1306,1311],{},[678,1307,1310],{"href":1308,"rel":1309},"https:\u002F\u002Fpieces.app\u002Fblog\u002Fsvelte-vs-react",[682],"Read our guide on Svelte vs React"," and which one is better for your development projects.",[713,1313,1314,1315],{},"Or check out ",[678,1316,1319],{"href":1317,"rel":1318},"https:\u002F\u002Fpieces.app\u002Fblog\u002Fhow-to-implement-react-infinite-scrolling-with-react-query-v5",[682],"how to implement React infinite scrolling with React query v5",[713,1321,1322,1323,751],{},"On the latest trends, I recommend checking ",[678,1324,1327],{"href":1325,"rel":1326},"https:\u002F\u002Fpieces.app\u002Fblog\u002Funit-testing-llms",[682],"unit testing in llms",{"title":870,"searchDepth":962,"depth":962,"links":1329},[1330,1331,1332,1333,1338,1343,1346],{"id":704,"depth":962,"text":705},{"id":743,"depth":962,"text":744},{"id":784,"depth":962,"text":785},{"id":806,"depth":962,"text":807,"children":1334},[1335,1337],{"id":825,"depth":1336,"text":826},3,{"id":889,"depth":1336,"text":821},{"id":927,"depth":962,"text":928,"children":1339},[1340,1341,1342],{"id":934,"depth":1336,"text":935},{"id":977,"depth":1336,"text":978},{"id":1106,"depth":1336,"text":1107},{"id":1157,"depth":962,"text":1158,"children":1344},[1345],{"id":1172,"depth":1336,"text":1173},{"id":1285,"depth":962,"text":1286},"Try Pieces","Software Development","2023-10-11T00:00:00.000Z","Learn about the importance of React unit testing, how to write unit tests in the software development process and much more.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fa-modern-guide-to-react-unit-testing\u002Fhero.jpeg","Photo of a person typing in their laptop.",{},null,"\u002Fblog\u002Fa-modern-guide-to-react-unit-testing",{"title":665,"description":1350},"blog\u002Fa-modern-guide-to-react-unit-testing","qyFk-tiIHGLMgcMHaAkojRvfC6qd_Xfo40PNzmJ2bfM",{"id":1362,"title":666,"body":1363,"description":1367,"draft":1351,"extension":1352,"meta":1370,"navigation":32,"path":1371,"photo":1372,"photoAlt":1356,"seo":1373,"stem":1374,"__hash__":1375},"authors\u002Fauthors\u002Fjames-amoo.md",{"type":671,"value":1364,"toc":1368},[1365],[674,1366,1367],{},"James Amoo is a Software Engineer and a Technical Writer. He excels in creating scalable software solutions and crafting clear and concise documentation. Having graduated with a First Class Honours degree in Computer Science, he is fundamentally well-versed in the in-depth concepts of programming.",{"title":870,"searchDepth":962,"depth":962,"links":1369},[],{},"\u002Fauthors\u002Fjames-amoo","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fjames-amoo.jpeg",{"title":666,"description":1367},"authors\u002Fjames-amoo","cHsg7jg2RaRueV_cvOOD8JHsrLPQxt-lYAgFPEDW_A8",{"left":1377,"top":1377,"width":1378,"height":1378,"rotate":1377,"vFlip":1351,"hFlip":1351,"body":1379},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]