Emotional & Functional UI Animations in React

Rate this content
28 min
02 Dec, 2022

Video Summary and Transcription

Today's Talk discussed the importance of UI animations in React, both functional and emotional. Examples were given using CSS and Framer Motion, with a focus on user feedback and accessibility. Design guidelines and animation usage were highlighted, as well as the consideration of negative emotions in animations. The Talk also touched on designing 404 error pages and concluded with gratitude to the audience and organizers.

Available in Español

1. Introduction to UI Animations in React

Short description:

Today's topic is emotional and functional UI animations in React. UI animations add motion, reduce cognitive load, and enhance interface charm. They can be functional or emotional, improving usability and delighting users. UI animation is important as it provides a natural user experience, reduces stress, and makes the UI more engaging. Animations in React can be created using pure CSS, frameworks, or libraries like Emotion and Framer Motion.

Welcome, everyone. So today I'm going to talk about emotional and functional UI animations in React. My name is Elisa Beto Oliveira. I'm from Portugal, Lisbon. I was born in Mozambique, of Portuguese, of Mozambican. And I'm a senior product designer. Currently I'm working for the Elastic UI team. It's a design system in use at Elastic.

And today the agenda is I'm going to first explain what is the UI animation, then why is UI animation important. How can we create animations in React? And in this part, I'm going to show a few examples with code and then just final thoughts. Sorry.

So what is the UI animation? It's basically the process of adding motion to UI elements. Also, it helps reduce cognitive load. And the cognitive load is the amount of effort that users experience when they want to do something. Also, the UI animation adds personality and charm to an interface. And also, it helps overcome language and culture barriers in interaction design.

And UI animations, they can be functional or emotional. Functional UI animations is basically the ones that can improve the UI by providing visual feedback. It improves usability, provides feedback on user actions, or also can provide feedback when the states of application changes. And the emotional UI animations is basically they can delight the user. It's a way so you can connect your brand. And the user, if it's done properly, the users can have more memorable experiences.

But why is UI animation important? First, they can provide a more natural user experience by simulating the experience of interacting with the physical object in the real life. Also, it can reduce stress by providing real-time updates and feedback. And also, it can make your UI more fun and engaging. And how can we create animations in React? Yeah, you can use just pure CSS with a framework or just the style.css. Sass, less. For my demos, I'm going to use Emotion. And also, you can for more complex animation, you can use Animation Library. And for the demos that I'm going to show afterwards, I'm using Framer Motion.

2. Examples of Functional Animations

Short description:

Let's see some examples. The first example is a functional animation that provides user feedback. When you hover over the button, it darkens and slides up. This is achieved using CSS with a transform property. Another example is a button that shows a line on click. Without animation, it would be strange. The line expands using an SVG element.

So let's see the examples. And this is like my blog website. And at the end of the talk, maybe in the afternoon, I can share this post. It's not yet published. But the idea is I'm going to show the animations here.

So this first example is a functional animation. And it's a functional animation because it provides a user feedback. Let's imagine that I could have a button like this. Let's say, no styles, anything. And on over, without any user feedback, it will be strange. You wouldn't know that you could click, only the cursor is changing. And in this one, I have a better user feedback. So when I over the button, it gets so darker, and the button goes a little bit, it slides up. So this is a good example of a functional animation. And it's really easy to achieve that. I'm just using CSS and basically on over, I have these transform translate-y. That is basically saying that I want the button to go one pixel up. And then I have this transform with this duration of 250 milliseconds and a timing function of easing out and no delay.

And now I can show a different example. In this one, there is a button that shows a line on click, and you can see, imagine this could be a nav bar. Without any animation, it will be weird because maybe you wouldn't see like on clicking or on over speaking, nothing would happen. Actually in my computer, this is pink. And there is a swing like purple, but it's pink. So when you click, this is the animation. We have like this line that expand. And to do this, also I'm using... so I have this demo component where I'm passing the exact state for each item. And then I have this button line. And in the button line, I'm using an SVG here. And this SVG is basically the line.

3. CSS and Framer Motion Animations

Short description:

I have a CSS animation that expands an SVG when clicked, providing user feedback. Another example is a more complex animation using Framer Motion, where a bell rings when clicked. The animation can be triggered by a notification in a real-world application. However, it's important to consider users with vestibular disorders and provide an option to reduce motion.

And then I have this CSS animation where I have this expand animation that happens in 0.3 seconds. And it has this timing function called ease in. So basically the expand, I'm using this keyframes from Emotion, but you could do the same with normal CSS. And I'm basically animating from to. So the width of that SVG, so it starts when I click, when I don't click it goes from, when I click it goes from zero and to 100%. So it's also very easy to achieve. And it's a good user feedback.

Just user notes, right now I'm on this page about, and then this is a more complex animation. So for this example, that I call a bell ringing in a header, I'm using Framer Motion. And when I click, so the bell rings. And I'm using this button, but in a real world application, this state, to animate it can come from, I don't know, API from your database. So basically you receive a notification, and the animation should trigger. So I'm using Framer Motion, and this animation is a little bit more complex. So basically with Framer Motion, you have these components, basically almost like styled components. So in this case, I'm wrapping the icon with the span. So what I do is motion dot span, and then I have multiple variants. In this case, I have two animation variants, one called active and the other called inactive. So in my active state, basically what I want to animate is the rotate, transform, rotate. So in my inactive state, I just want to say that I want to rotate zero. And in my active state, I want to rotate all these array of different degrees, zero, 30 degrees, minus 10, 28, and I just give random numbers because in the real world, a bell rings randomly. So it's what I'm trying to mimic. So I have these two variants and the active states, as you can see, I'm going to call that array of degrees. But in this case, if you notice this animation is very frenetic and we cannot forget that we have some users that can have some disorder and things like nausea and vertigo. It's called vestibular disorders. So in OSX and other operating systems, you can have this, that is part of the accessibility. You can click to reduce motion. So when you reduce motion and if I click, nothing happens because right now the user has that option enabled. But if I disable the option, it's animating again. So with FramerMotion, even with pure CSS, you have a media query called PreferReduceMotion and you should use it to check if the user has that option enabled or not. So if the user has the reduce motion enabled, you shouldn't animate.

4. Functional and Emotional Animations

Short description:

I use the useReduceMotion hook from FramerMotion to check if the user has enabled the option for no rotation. In the next example, I got inspiration from Josh Kamau's website and created a similar animation. The example consists of two components, one for user likes and the other for total likes. When the user reaches five likes, they can no longer click. The animation includes changes in size and eyes when hovering, and the display of emojis when clicked.

So I check what I do is I use these useReduceMotion hook that, hello, hello, that comes from FramerMotion and if the user has option enabled, no rotation happens, it should see. If it has, if this is disabled, it goes through that array. And this is very important to do.

And then the next example, it's a functional, but at same time emotional animation. And this one I got inspiration from Josh Kamau website. I think when I first time I went to his website and I saw his blog with this cute heart. I wanted to find out what he did to achieve that. So I tried to do something similar.

So in this example, I have like two components. The first one is basically where I have two states. The user likes and the other is the total likes. So the total likes is this one, currently is one 17 and the user likes one, two, three, four, five. And when I reach five, I don't allow users to click anymore. So I'm passing those two states to the, I'm calling this component love button and I'm using framer motion. And there are multiple things happening here. The first one is on over. It gets the eyes change and it gets bigger. So basically, to do that, I'm using this react on mouse enter and on mouse leave. And I have this state is over. And when the mouse entered, I set the is over state to true. And then I can just with SVG change the eyes. If is over, I show one pet with some eyes. If it's not over, I show this arch eyes. And then there's another animation. So when you click, you can see these emojis here. So to do that, I have this array of emojis. And then I loop through that array of emojis. And then I check. So I just want to look at five likes. So if the first like, when it's the first like and this the first emoji in the array, it gets visible.

5. UI Animation Examples

Short description:

The first animation involves an emoji moving upwards with opacity changes. The second animation uses a pink square to fill a heart-shaped button. Clicking the square moves it up in increments until it reaches zero. The last example is a search bar with a planet that animates when writing or clicking. The planet spins and the eyes and mouth animate with a set timeout. The animation is implemented using framer motion and includes options for accessibility.

And then it animates with one of the variants. The visible variant that is basically, that is basically showing that emoji going to the top. So this is the visible animation. So basically I'm using again the translate Y and some opacity. So in this case, it goes from zero to 16 and then from 16 to 32 like this, and then I have some opacity. It goes from zero to 0.8 and then it disappears zero again.

And then there's another animation that is basically the button is getting filled out with this pink color and to do that, basically when I designed this, so I'm using a mask and the mask has this heart shape and in the mask there is a square and the square is pink. So right now that square there is pink, it's on the bottom and when I start clicking that square is starting going up, up, up, up. So every time I click, I'm just basically translating that square. So it's the zero position actually is 42 pixels, it's here, it's zero, it's here. So I want to make that square go to the 42 pixel. So when it's zero, right now it's in 42, when I click again, it goes to 32, 24, 16, eight and zero. So this was the example of a emotional UI animation.

And then this is the last example that I'm going to show. And this is a search bar that with a planet that animates. And I use this animation with one project that I did with Sara Vieira a few years ago. It's basically is there Uber in? And the idea of the project was to check in any city of the world if you could have Uber. So because the website was so empty, we only have the input there to search for the city. I had this idea, let's just put a planet representing the world and the planet could animate. So the idea is when you start writing, it animates a little bit. If you click, it spins. And also you have the eyes in the mouth that animates with the set timeout. So to do this animation, once again, I'm using framer motion. Also using use with use motion. So if I click again, the animation doesn't happen, it doesn't spin because I think it's too much. So in this case I give this option for improve the accessibility for some users. So to do that, I have this component demo. And in that component, I have three states. Researching, research complete. So basically when it's searching, the idea is it goes from 0, 5, 0, it's also rotation, minus 0.

6. Animating Search Component

Short description:

And when it search complete, it just rotates completely. And when it's not searching, it just rotates 0. And for the eyes and mouth, I'm just animating the scale y. It goes from 1 to 0.1 and then back to 1. The animation is set to repeat multiple times, with a delay of 3 seconds on component load and every 5 seconds thereafter. Functional animations, like the button, bell ringing, and nav bar examples, provide user feedback. Use simple micro interactions to indicate clickability and represent the real world. Avoid overwhelming the UI with excessive animations.

And when it search complete, it just rotates completely. And when it's not searching, it just rotates 0. And I'm using the use effect just to check the states that comes from the parent component. So if it's searching, I have another state called planet animation. And so if it's searching, I set the variant to be searching or research complete or is not searching. And then that's basically what happens.

And then for the eyes and mouth, I don't need to use any variants. So basically, I'm just animating the scale y. So basically, it goes from 1. This is an example of the mouth. So the mouth is completely open. Then it closes to 0.1. And then 1 again. I'm saying that I want to repeat this animation multiple times, infinity times. The direction is 0.3. Let's imagine if it was 4. It will take some time. So let's put 0.3. When we load this component, there's a 3-second delay. And then every 5 seconds, the animation happens again. And so this is the example. And I have one minute.

And this is the final thoughts of the animations that I showed. So you should use that functional animations, like the one that I showed with the button, the bell ringing, and that nav bar as a way to provide user feedback. So when you have this type of animations, the idea is you don't need to do too much. Just use like micro interactions, very simple ones, just to indicate like on over a button that the button is clickable, or try to do something that represents the real world. So when you have a lot of elements in one page, don't try to do and have a lot of animations. Imagine if I had the planet, the heart, and a lot of things happening at the same time. It would be too much. But when your UI doesn't have too many elements, like in that case of the is there Uber in, you just have a text, an input text, or an input search.


Frenetic Animations and Q&A

Short description:

In frenetic animations, check if the user has reduce motion enabled. Use media queries or hooks in libraries like Frame or Motion. Thank you, everyone. Thank you, Eva. Now, let's move on to the Q&A. We have questions on Slido about documenting animations in pattern libraries or design systems.

In that case, you can maybe have something happening, a frenetic animation that represents your brand, for example. And when you have those frenetic animations, like the bell ringing or something that is too much, don't forget to check if the user has the reduce motion enabled. You can do that with a media query, with pure CSS. Or if you use a library like Frame or Motion, you have that hook. Don't forget about this. This is very important for accessibility.

And that was the talk. Thank you, everyone. Thank you, Eva, ever so much. Would you like to join me for a short Q&A? Let's reset that table. Someone moved it. Excellent. Thank you, Eva, so much. I found that really interesting and insightful.

Now, we have some questions on Slido. And for those of you who have joined this room since the little intro, in this track, we're going to be asking questions using the same Slido link as before. So that's sli.do in your browser. And you can use code 0212, that's the date, in order to get into the event. There are a couple of tracks. Make sure you choose the mnemonic track in order to ask questions in this track. And ideally, if you can pop the name of the speaker in with your question, that'd be great. Those of you who submitted questions and didn't, I've done it for you. So don't worry. But on an ongoing basis, that'd be very handy. So with that in mind, we actually have a few questions that were posed during your talk. So the first one is, do you have any thoughts on documenting animations in pattern libraries or design systems? Yes. I think, and this is something that we're trying to do now with Elastic UI. At Elastic UI, I'm saying, when I introduce, I said, it's a design system. But actually, it's not a real design system right now. It's just a library, because we're missing a few things.

Design Guidelines and Animation Usage

Short description:

We're missing design guidelines and animation guidelines, which are important for maintaining consistency in application development. It's necessary to establish guidelines to avoid different ways of implementing animations. The preferred reduced motion is not the same as no motion, and determining when animations are excessive can be challenging. User testing and collaboration with accessibility specialists can help determine the necessity of animations in different components. While CSS is preferred, libraries like Frame-O-Motion can be used when CSS becomes complex.

We're missing some design guidelines. We also don't have animations guidelines. And I think it's really important, because when you don't create those guidelines, then your application will start having a lot of different ways of doing things. So imagine that maybe you implement one button, and it comes already, because it's a design system. It already has animation. But then if you, in an app, if they have to implement a custom button or a custom fly out or pop over or something, they can use any type of animation. And then we'll start getting weird, I think. Too many differences.

Yeah, absolutely. Like any component in a design system. One question, which has actually been asked a couple of times in slightly different ways, is that preferred reduced motion is not prefers no motion. But how do we know when it's too much? That's it. That's something also at Elastic UI, we have one rule that we do that for all the animations and all transitions. So basically we have one function that we wrap. We're using also a motion. And we use that to wrap all the animations. And basically the animation doesn't happen. Sometimes I think that probably these micro animations like buttons, it doesn't make a difference. I think maybe we don't need to do that. But some of these things we keep learning. And probably in the future maybe we can do some user testing. We have someone specializing in accessibility that maybe we can talk. And maybe you can try to find out is the buttons really necessary to have these? Or just, I don't know, models, fly outs, maybe those big components that appear from slide in, slide out, these type of animations, maybe only those components need. But actually I think every design system have their own rules. If I was taking my own decisions, but it's a team decision, maybe I wouldn't wrap these micro interactions.

Excellent. And I suppose with anything to do with accessibility, not just animations, user testing is really at the key of understanding best practice. Excellent. Is it a better idea to use libraries like Frame-O-Motion or just basic or vanilla CSS? My rule is, I always try to use first CSS, only when I am struggling and I start seeing, like, this is getting complex. I have to inject this class and to do this and that.

CSS Animations and Handling Negative Emotions

Short description:

As a designer, I prefer to use CSS over complicated JavaScript. Transform animations can cause performance issues, especially inside flex components. Shakra UI avoids using transform animations. We no longer support IE 11 and recommend testing animations for optimal performance. To access the article and demo information, visit my website MewkiMew. I chose the name MewkiMew because my real name was already taken. When representing negative emotions, consider using different moods in illustrations or animations.

And I'm also a designer, so my JavaScript skills are not that good. And sometimes, when I start to overcomplicate, just to use CSS. That's what I know. It's better to use a library, because they're already taking care of some coding parts. And that's when I take that decision. Makes absolute sense.

Are there any, this might be a little deep in knowledge, but to your knowledge, are there any CSS properties that you find are better not to animate for either performance or accessibility reasons? We had a lot of issues, actually, with transform. Those type of transform-wise and transform-x animation, sometimes the performance is not good, especially when it's inside flex components and other components. We had some issues in some applications like Kibana. And so maybe, I don't know, maybe I noticed that, in Shakra UI, I was actually using Shakra UI for the demos. They only have these over animations with changing the background color. They don't do this button going up and using this transform. So once again, I think when we're implementing and we start having a lot of issues with those transform animations and transitions, maybe we should consider removing. And also, what are you supporting? We're not currently supporting anymore IE 11. We always do some tests, and we don't have any problem with the type of animations we're using. But I think, once again, it's testing and see what works the best.

Cool. I think you answered this during your talk, but just for clarity, how can our lovely audience today access the article with all the information that you used in your demo? So you can go to my website that has this name, MewkiMew. And the name MewkiMew, it's because I had this cat. And Elisabet Oliva, my real name, was already taken. So I'm going to buy this domain called MewkiMew. And it stays until today. I think at the time I had, I don't know, 18 years old when I did that. Yeah, but you can go there. I'm going to publish maybe at 5 PM. Yeah, I did wonder where your username came from. I really like that story. We probably have time for just one or two more. Should we refrain from having animations for negative emotions? Or how would you suggest handling this? Yes, actually I have this project, React Huawei, where I have components that are like illustrations, and they have different moods. So when it's like an error state, you can change the mood of the planet or the ice cream that is illustration, to a sad face.

Designing 404 Error Pages and Conclusion

Short description:

When designing a 404 error page, consider using an illustration that conveys the page not found message with a touch of cuteness or whimsy. As the talk concludes, the speaker expresses gratitude to the audience, organizers, and themselves for delivering an excellent talk.

So I think, yes, when you have a 404 error page, instead of just showing 404 page not found, maybe you can page not found and have like an illustration that is crying. It's negative, but at the same time, it can be cute. And maybe... Or whimsical. Yes. Yeah.

OK, I think we're just about at time. And I feel like the questions that are still being posed are similar to questions we've already covered. So I'm going to take this opportunity to, on behalf of our whole audience, organizers, and myself, say a huge, huge thank you for delivering such an excellent talk. Let's give a massive round of applause. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Advanced Conference 2021React Advanced Conference 2021
27 min
(Easier) Interactive Data Visualization in React
Top Content
If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick & easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data & use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time & effort!

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn