Testing Components that use Material-UI

In this section, we will learn how to test components that use the Material-UI component library. You can select DOM elements rendered by Material-UI components out of the box with React Testing Library in most cases. However, sometimes it is helpful to add component properties that render as attributes on resulting DOM elements. We will learn how to add properties to test the Vote and Customer Table components.

Adding an ARIA label to test a Vote component

In the Testing a context consuming Vote component section of this chapter, we tested a Vote component.

We could use components from Material-UI to rebuild the component:

    <div>
      <Box display="flex" flexDirection="column" css={{ width:         100 }}>
        <Button
       ...