This video is available to students only

Even though our Button component has a simple API, there are several features that we can test. Some possible test-cases include making sure that the component:

  • Defaults the type attribute to button

  • Allows consumers to override the default type

  • Allows all valid props to be spread onto the button element

In this course we will avoid testing the individual styles of our components. These types of tests can become rigid and hard to maintain over time. Without rendering these components in a real browser and visually checking the styles we are unable to assert that the styling is correct. There are several testing methodologies and tools, like snapshot testing and component image snapshots, that will help with style assertions, if that is something that you would like to pursue.

Creating our tests#

To create our Button tests let's create a new spec file, Button.spec.tsx, with the following content:

Please select a discussion on the left.