Testing Storybook Components with Jest

Storybook is a fantastic tool for developing UI components in isolation. However, ensuring these components behave as expected requires robust testing. This challenge focuses on writing Jest tests for Storybook components, verifying their functionality and ensuring they render correctly under various conditions.

Problem Description

You are tasked with creating Jest tests for a simple Storybook component called Button. The Button component accepts a label prop (string) and an onClick prop (function). The tests should verify:

1. Rendering: The component renders the provided label correctly.
2. Click Handling: When the button is clicked, the provided onClick function is called with the correct arguments.
3. Disabled State: The component handles a disabled prop (boolean) correctly, disabling the button when disabled is true and enabling it when disabled is false. When disabled, the button should not be clickable.

Key Requirements:

• Use Jest and React Testing Library for testing.
• Mock the onClick function to verify it's called correctly.
• Ensure the tests are readable and maintainable.
• The component is defined in a file named Button.tsx.

Expected Behavior:

• Tests should pass when the component renders correctly, handles click events, and responds to the disabled prop.
• Tests should fail if the component doesn't render the label, the onClick function isn't called, or the disabled state isn't handled correctly.

Edge Cases to Consider:

• Empty label string.
• onClick function not provided (should still render, but not be clickable).
• disabled prop not provided (should default to false).

Examples

Example 1:

Input: Button component with label "Click Me" and a mock onClick function.
Output: Jest tests pass, confirming the button renders "Click Me" and the onClick function is called when clicked.
Explanation: This verifies the basic rendering and click handling functionality.

Example 2:

Input: Button component with label "" (empty string) and a mock onClick function.
Output: Jest tests pass, confirming the button renders an empty string and the onClick function is called when clicked.
Explanation: This tests the handling of an empty label.

Example 3:

Input: Button component with label "Submit" and a mock onClick function, and disabled prop set to true.
Output: Jest tests pass, confirming the button renders "Submit", the onClick function is *not* called when clicked, and the button appears disabled visually (e.g., greyed out).
Explanation: This tests the disabled state functionality.

Constraints

• You must use React Testing Library for interacting with the component.
• The Button component is assumed to be a functional component.
• The tests should be written in TypeScript.
• The onClick prop is expected to be a function that accepts an event object as an argument.
• The visual appearance of the disabled state is not explicitly tested; focus on ensuring the click event is prevented.

Notes

• Consider using userEvent from React Testing Library for simulating user interactions like clicks.
• Think about how to effectively mock the onClick function to verify its invocation and arguments.
• Pay attention to the order of your assertions to ensure they accurately reflect the expected behavior.
• Start with the simplest test case (rendering with a label and onClick) and gradually add complexity.
• The Button.tsx component is not provided; you'll need to create it. A basic implementation is sufficient for testing purposes. For example:

// Button.tsx
import React from 'react';

interface ButtonProps {
  label: string;
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
  disabled?: boolean;
}

const Button: React.FC<ButtonProps> = ({ label, onClick, disabled = false }) => {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
};

export default Button;