Testing Accessibility with Jest and QueryByRole

Ensuring your web applications are accessible is crucial for inclusivity. This challenge focuses on writing robust Jest tests that verify the accessibility of your components using queryByRole. You'll learn to leverage queryByRole to target elements based on their semantic meaning, making your tests more resilient to changes in the underlying HTML structure.

Problem Description

You are tasked with creating a suite of Jest tests for a simple React component called CustomButton. This component renders a button with a specific label and an optional icon. The goal is to verify that the button is accessible and behaves as expected using queryByRole. Your tests should cover scenarios where the button is present, not present, and has specific attributes. The tests should use queryByRole to find the button and assert its properties.

Key Requirements:

• Use queryByRole to locate the button element.
• Assert that the button exists when it should and doesn't exist when it shouldn't.
• Verify the button's label matches the expected text.
• Handle cases where the button might not be rendered.
• Write clear and concise test descriptions.

Expected Behavior:

• Tests should pass if the component renders correctly and the button is accessible.
• Tests should fail if the component renders incorrectly or the button is not accessible.
• Tests should be resilient to changes in the underlying HTML structure, focusing on semantic meaning.

Edge Cases to Consider:

• The button might not be rendered based on a conditional prop.
• The button label might be dynamic and depend on props.
• The component might contain other elements that could interfere with the tests.

Examples

Example 1:

Input: <CustomButton label="Click Me" />
Output: The test should assert that a button with the role "button" exists and its text content is "Click Me".
Explanation: This is the basic scenario where the button is rendered and has the expected label.

Example 2:

Input: <CustomButton label="Submit" disabled={true} />
Output: The test should assert that a button with the role "button" exists, its text content is "Submit", and it has the `disabled` attribute.
Explanation: This tests the scenario where the button is disabled.

Example 3:

Input: (Component renders conditionally, and the button is not rendered)
Output: The test should assert that no button with the role "button" exists.
Explanation: This tests the scenario where the button is not rendered.

Constraints

• You must use Jest and React Testing Library.
• You must use queryByRole for all element lookups.
• The component CustomButton is provided (see below).
• Tests should be written in TypeScript.
• The component will only accept label (string) and disabled (boolean) props.

Notes

• Consider using toBeInTheDocument() to ensure the element is in the DOM before asserting its properties.
• Think about how to handle asynchronous rendering or side effects that might affect the button's state.
• Focus on writing tests that are readable, maintainable, and cover a wide range of scenarios.

// CustomButton.tsx (Provided Component)
import React from 'react';

interface CustomButtonProps {
  label: string;
  disabled?: boolean;
}

const CustomButton: React.FC<CustomButtonProps> = ({ label, disabled }) => {
  return (
    <button type="button" disabled={disabled}>
      {label}
    </button>
  );
};

export default CustomButton;