docusaurus/assets/js/8075f6fd.e4d71a64.js

"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([["39441"],{88593:function(e,n,t){t.d(n,{Z:()=>s});let s=t.p+"assets/images/social-card-0662a6f419d0032829f99915ccf8918b.png"},40610:function(e,n,t){t.d(n,{Z:()=>s});let s=t.p+"assets/images/social-card-0662a6f419d0032829f99915ccf8918b.png"},80792:function(e,n,t){t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>d});var s=t(68164),i=t(85893),r=t(80980);let o={authors:["slorber"],tags:["release"],slug:"/upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing",description:"Upgrade npm dependencies with confidence thanks to a visual regression testing workflow using GitHub Actions, Playwright and Argos.",image:"./img/social-card.png"},a="Upgrading frontend dependencies with confidence",c={image:t(88593).Z,authorsImageUrls:[void 0]},d=[];function l(e){let n={a:"a",img:"img",p:"p",strong:"strong",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.p,{children:["Frontend developers often need to ",(0,i.jsx)(n.strong,{children:"upgrade npm dependencies"}),", but those upgrades can feel scary and lead to ",(0,i.jsx)(n.strong,{children:"subtle UI side effects"})," not caught by your regular test suite."]}),"\n",(0,i.jsxs)(n.p,{children:["Upgrading Docusaurus is a good example: without reviewing all the pages one by one, it's hard to be sure there's no visual regression. ",(0,i.jsx)(n.strong,{children:"Docusaurus v3 is around the corner"})," (currently in ",(0,i.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/9312",children:"beta"}),"), and we would like to help you do this upgrade with confidence."]}),"\n",(0,i.jsxs)(n.p,{children:["This article introduces a ",(0,i.jsx)(n.strong,{children:"visual regression testing"})," workflow based on ",(0,i.jsx)(n.a,{href:"https://github.com/features/actions",children:(0,i.jsx)(n.strong,{children:"GitHub Actions"})}),", ",(0,i.jsx)(n.a,{href:"https://playwright.dev/",children:(0,i.jsx)(n.strong,{children:"Playwright"})}),", and ",(0,i.jsx)(n.a,{href:"https://argos-ci.com/",children:(0,i.jsx)(n.strong,{children:"Argos"})}),". It is not directly coupled to Docusaurus or React, and can be adapted to work with other frontend applications and frameworks."]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"Upgrading frontend dependencies with confidence - social card",src:t(40610).Z+"",width:"1500",height:"785"})})]})}function u(e={}){let{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},80980:function(e,n,t){t.d(n,{Z:()=>a,a:()=>o});var s=t(67294);let i={},r=s.createContext(i);function o(e){let n=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(r.Provider,{value:n},e.children)}},68164:function(e){e.exports=JSON.parse('{"permalink":"/blog/upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing","editUrl":"https://github.com/facebook/docusaurus/edit/main/website/blog/2023/09-22-upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing/index.mdx","source":"@site/blog/2023/09-22-upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing/index.mdx","title":"Upgrading frontend dependencies with confidence","description":"Upgrade npm dependencies with confidence thanks to a visual regression testing workflow using GitHub Actions, Playwright and Argos.","date":"2023-09-22T00:00:00.000Z","tags":[{"inline":false,"label":"Release","permalink":"/blog/tags/release","description":"Blog posts about Docusaurus\' new releases"}],"readingTime":8.355,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer, This Week In React editor","url":"https://thisweekinreact.com","page":{"permalink":"/blog/authors/slorber"},"description":"A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.","socials":{"bluesky":"https://bsky.app/profile/sebastienlorber.com","x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","instagram":"https://www.instagram.com/thisweekinreact","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"}],"frontMatter":{"authors":["slorber"],"tags":["release"],"slug":"/upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing","description":"Upgrade npm dependencies with confidence thanks to a visual regression testing workflow using GitHub Actions, Playwright and Argos.","image":"./img/social-card.png"},"unlisted":false,"lastUpdatedAt":1741859625000,"lastUpdatedBy":"pedenys","prevItem":{"title":"Preparing your site for Docusaurus v3","permalink":"/blog/preparing-your-site-for-docusaurus-v3"},"nextItem":{"title":"Docusaurus 2.4","permalink":"/blog/releases/2.4"}}')}}]);