From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Prop-based behaviour

Prop-based behaviour

From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Start my 1-month free trial Buy for my team

Prop-based behaviour

“

Hello, and welcome! In this session, you will learn a fundamental concept in component testing – verifying behavior based on props. We will build a simple SubmitButton component that can be either enabled or disabled. Then we will write tests to confirm that it behaves correctly when we pass different values to its Disabled prop. By the end, you'll have a clear understanding of how to write tests that give you confidence in your component's dynamic behavior. Alright, let's get started. First, we need to create the files for our SubmitButton component and its corresponding test file. Moving to SubmitButton.jsx, I've created a new SubmitButton component. It accepts a Disabled prop which controls the button's disabled state. Passing Disabled equals true disables the button. Moving to our test file. The first thing I need to do is import the necessary tools. From at testing library slash react, I am importing Render and Screen. The Render function is what I will use to render my component…

Contents