React Native

React Native: Testing Gets Its Own Home

Today we're diving into a major architectural shift as React Native splits out its Jest testing setup into a dedicated package, plus a bunch of quality-of-life improvements across the codebase. Phil Pluckthun led the charge on extracting Jest configuration into its own home, while the team continued modernizing components and fixing animation bugs.

Duration: PT4M13S

https://podlog.io/listen/react-native-b1306806/episode/react-native-testing-gets-its-own-home-9fc1c5ed

Transcript

Hey there, fellow developers! Welcome back to another episode of React Native - I'm your host, and wow, do we have some interesting changes to dig into today. Grab your coffee because we're talking about some pretty significant moves happening in the React Native ecosystem.

So here's the big story that caught my attention - and I think you're going to find this really interesting. Phil Pluckthun just landed a pretty major architectural change that's all about making testing better for everyone. They've split out the Jest preset into its own dedicated package called `@react-native/jest-preset`.

Now, you might be thinking "wait, why is this a big deal?" Well, here's the thing - this is actually a really smart move for the ecosystem. Instead of having all the Jest configuration and dependencies bundled up with the main React Native package, they're now living in their own space. This means cleaner dependencies, better separation of concerns, and honestly, it just makes more sense architecturally.

The cool part is how they handled the migration. The old `react-native/jest-preset.js` file will actually throw a helpful error if you haven't installed the new package yet, walking you through exactly what you need to do. It's that kind of thoughtful developer experience that I really appreciate - they're not just breaking things and leaving you to figure it out.

But that's not all that's been happening! Fabrizio Cucci has been on an absolute roll with modernization work. They've been systematically updating React components throughout the codebase to use Flow's modern component syntax instead of the legacy function syntax. We're talking Observer API examples, ScrollView examples, and Experimental components - it's like watching a codebase get a fresh coat of paint, but for type safety and modern practices.

Now, here's something that caught my eye for anyone working with animations. Bartlomiej Bloniarz fixed a pretty gnarly bug in the Animation Backend around JavaScript synchronization when animations end. This was one of those tricky issues where everything looked fine on the surface, but certain edge cases with main-thread commits weren't cleaning up properly. The fix ensures that when your animations finish, the state synchronization between the animation thread and React's render cycle works exactly as expected.

And speaking of fixes, Nick Gerleman tackled an issue with Pressable Text that was causing double-firing events. You know how frustrating those kinds of bugs can be - users tap once but your handler fires twice. These are the kinds of quality-of-life improvements that make such a difference in the day-to-day developer experience.

The iOS side got some love too, with Nicola Corti adding better support for custom HTTP headers in development tooling. It might sound like a small thing, but when you're debugging network issues or working with custom development setups, having that flexibility can be a real game-changer.

What I love about today's changes is that they show the React Native team really thinking about the long-term health of the codebase. The Jest preset extraction isn't just about organization - it's about making the ecosystem more modular and maintainable. The Flow syntax migrations aren't just about staying current - they're about better type safety and developer experience.

For today's focus, if you're using Jest for testing in your React Native projects - and honestly, you probably should be - keep an eye out for the new `@react-native/jest-preset` package. The migration looks pretty straightforward, but it's worth understanding how it works so you're ready when it lands in a release.

Also, if you're working on animations, especially complex ones with main-thread involvement, the animation backend improvements might solve some mysterious bugs you've been scratching your head about.

That's a wrap on today's episode! It's always exciting to see the foundational improvements happening alongside the flashy new features. These are the changes that make our daily development experience just a little bit smoother, and honestly, that's what it's all about.

Keep coding, keep learning, and I'll catch you in the next episode!