---
title: "Slack's AI powered React testing tool migration"
publication: "React Status"
issue: 390
published_at: "2024-06-26"
canonical_url: "https://react.statuscode.com/issues/390"
---

Plus the latest React Jam winners, the greatest trick in UI development, and a new drag-and-drop library. |        

#​390 — June 26, 2024 

[Read on the Web](https://react.statuscode.com/issues/390)   

😅 A shorter and sweeter issue than usual today, as I'm currently on-site at the [AI Engineer World's Fair](https://www.ai.engineer/worldsfair) in San Francisco! You can join me virtually, though, as some of the event [will be livestreamed](https://www.youtube.com/watch?v=5zE2sMka620) today and tomorrow ;-) See you back at full steam next week!
__
_Peter Cooper, your editor_ 

Together with [![Sentry logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_350,h_100/e_make_transparent/co_white,e_outline:7/xdmchdxkka938lxfr86f.png)](https://sentry.io/resources/behind-the-code-a-discussion-with-backend-experts/?utm_medium=paid-community&utm_source=reactstatus&utm_campaign=fy25q2-backendworkshop&utm_content=newsletter-backendworkshop-register)  React Status  

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/rrfejdh4dom7jvbhg85o.jpg)](https://marmelab.com/blog/2024/06/20/react-admin-v5.html)  

[Introducing React-Admin v5](https://marmelab.com/blog/2024/06/20/react-admin-v5.html) — A MIT-licensed framework for building typical webapps on top of REST or GraphQL APIs. You get some added structure, theming, and lots of building blocks out of the box. There are also [commercial extensions](https://react-admin-ee.marmelab.com/) if you require support or extra features. [GitHub repo.](https://github.com/marmelab/react-admin) 

François Zaninotto   

[Slack's AI-Powered Conversion from Enzyme to React Testing Library](https://slack.engineering/balancing-old-tricks-with-new-feats-ai-powered-conversion-from-enzyme-to-react-testing-library-at-slack/) — Frameworks, libraries, and tools come and go, but it can become easy to get stuck with a certain setup when you’ve built up a significant codebase upon certain dependencies. Tools like codemods and AI / LLMs are increasingly being used at scale in library migrations, as Slack demonstrates here. 

Sergii Gorbachov (Slack)   [![\](https://copm.s3.amazonaws.com/35ccd26f.png)](https://sentry.io/resources/behind-the-code-a-discussion-with-backend-experts/?utm_medium=paid-community&utm_source=reactstatus&utm_campaign=fy25q2-backendworkshop&utm_content=newsletter-backendworkshop-register) 

[Behind the Code: A Discussion with Backend Experts](https://sentry.io/resources/behind-the-code-a-discussion-with-backend-experts/?utm_medium=paid-community&utm_source=reactstatus&utm_campaign=fy25q2-backendworkshop&utm_content=newsletter-backendworkshop-register) — On July 16, join contributors, founders, and CEOs from Laravel, Node.js, Prisma, and Supabase to discuss the latest trends in backend development. Hear how they navigate challenges, listen to their communities, and innovate fast. RSVP today. 

Sentry sponsor   

**IN BRIEF:** 

- 🕹️ Earlier this month, the _React Jam_ gamejam took place and [here are the newest winners.](https://reactjam.com/winners-spring-2024)
- 🖼️ Storybook's Michael Shilman [introduces us to visual testing](https://storybook.js.org/blog/visual-testing-is-the-greatest-trick-in-ui-development/), what he calls _"the greatest trick in UI development"._   

[Understanding React Compiler](https://tonyalicea.dev/blog/understanding-react-compiler/) — The [new, experimental tool from the React team](https://react.dev/learn/react-compiler) automates your performance tuning by rewriting your code — but should you use it, and how does it work under the hood? Tony takes a look. 

Tony Alicea   

[Migrating to Next.js App Router with Zero Downtime](https://workos.com/blog/migrating-to-next-js-app-router-with-zero-downtime) — Migrating a complex app page by page will likely throw up some UX hurdles. The team at WorkOS developed a migration guide that allowed them to test their entire app with App Router while still serving the Pages Router to users _before_ making the final switch. 

Motta & Moroz (WorkOS)   

📄 [MDX or 'How I Learned to Stop Worrying and Love Multimedia Writing'](https://www.smashingmagazine.com/2024/06/mdx-or-how-i-learned-love-multimedia-writing/) Frederick O’Brien 

📄 [Using the Intersection Observer API with React](https://reactpractice.dev/articles/using-the-intersection-observer-api-with-react/) Corina Udrescu 

📺 [Authentication in Next.js: Best Practices and Techniques](https://www.youtube.com/watch?v=N_sUsq_y10U) – A short and sweet introduction to the essentials. _(12 minutes.)_ Delba 

📄 [The Secret to Maintainable Remix Apps: Hexagonal Architecture](https://laconicwit.com/the-secret-to-maintainable-remix-apps-hexagonal-architecture/) Brendan McLoughlin  

🛠 Code, Tools & Libraries 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/ivvqzlh6lndgplcyvmb1.jpg)](https://github.com/pdfslick/pdfslick)  

[PDFSlick: View and Interact with PDFs](https://github.com/pdfslick/pdfslick) — An interesting PDF viewer for React, Solid, Svelte and other JavaScript apps. Built on top of PDF.js, it uses Zustand to provide a reactive store for loaded documents. [Live demos.](https://pdfslick.dev/examples) 

Vancho Stojkov   

[simpleParallax: A Simple, React-Focused Way to Create Parallax Effects to Images](https://simpleparallax.com/) — A straightforward library to add parallax-style animations to any image on your page. [Not _always_ a good idea UX-wise](https://www.webaxe.org/vestibular-issues-parallax-design/), but the examples and code samples here certainly sell it well. 

Geoffrey Signorato       

📰 Classifieds   

🤔[How to Build Reusable Components Using React](https://buttercms.com/blog/building-reusable-components-using-react/) - Tutorial by ButterCMS. 

--- 

Your fastest path to production. [With Render, you can build, deploy, and scale your apps with unparalleled ease](https://render.com?utm_source=cooperpress&utm_medium=cooperpress) – from your first user to your billionth. 

--- 

🔁 [PowerSync](https://www.powersync.com/?utm_source=newsletter&utm_medium=sponsorship&utm_campaign=react-status-selfhost) keeps in-app SQLite in sync with backend Postgres to simplify local-first app development for React and RN. [Free & self-hostable](https://www.powersync.com/?utm_source=newsletter&utm_medium=sponsorship&utm_campaign=react-status-selfhost).      

[Snapdrag: A Straightforward Drag-and-Drop Library](https://github.com/zheksoon/snapdrag) — A new drag-and-drop library built partly out of frustration of the complexity and inflexibility of existing options. [Check out this code example](https://github.com/zheksoon/snapdrag?tab=readme-ov-file#show-me-the-code) to see if it feels right for you, too. 

Eugene Daragan   

[Sortable: A Sorting Component for Tables, Forms, etc.](https://github.com/sadmann7/sortable) — Built with Next.js, it uses shadcn/ui and Radix UI for the components and dnd-kit for the draggable behavior, which you can try out on [a few simple demos](https://sortable.sadmn.com/). 

Sadman Sakib   

- [Next SaaS Stripe Starter 1.0](https://github.com/mickasmt/next-saas-stripe-starter) – Start your next project quickly with a stack of Next.js 14, Prisma, Neon, Auth.js v5, Resend, React Email, Shadcn/ui, and Stripe.
- [ka-table 11.0](https://github.com/komarovalexander/ka-table) – Lightweight React table component. ([Demos.](https://komarovalexander.github.io/ka-table/#/overview))
- [React Awesome Query Builder 6.6](https://github.com/ukrbublik/react-awesome-query-builder) – Logical query builder control. ([Demo.](https://ukrbublik.github.io/react-awesome-query-builder/))
- [React Spinners 0.14](https://www.davidhu.io/react-spinners/) – A collection of loading spinner components.
- [Keep React 1.4](https://github.com/StaticMania/keep-react/releases/tag/v1.4.0) – Component library built on Tailwind CSS.
- [Wouter 3.3](https://github.com/molefrog/wouter/releases/tag/v3.3.0) – Minimalist router for React & Preact.
- [Astro 4.11](https://astro.build/blog/astro-4110/)         

Curated by Peter Cooper and Terence C. Gannon. 

A **[Cooperpress](https://cooperpress.com/)** publication. 

[Change your email address](https://react.statuscode.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://react.statuscode.com/leave/*|UID|*) 

© Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom