React TestCase HandBook

The React TestCase Handbook serves as a comprehensive guide to testing React applications using the React Testing Library framework. This handbook covers a wide range of test cases to help you thoroughly test your React components, ensuring their reliability, functionality, and adherence to user requirements.

Application Component Test Cases

The test cases provided in this file test the rendering and accessibility of the Application component. This component represents a job description form with various input fields, checkboxes, and a submit button.

Test 1: Renders Correctly

• Description: This test case verifies that the Application component renders correctly and all required elements are present.

• Test Steps:

  • Render the Application component using the render function from @testing-library/react.
  • Use the screen.getByRole function to retrieve specific elements.
  • Assert that each element is present in the rendered output.

• Expected Result: The test passes if all the required elements, such as the job location combobox, terms checkbox, submit button, headings, labels, placeholders, text, images, and custom element, are found in the rendered output.

Test 2: Retrieve Elements by Role

• Description: This test case verifies the presence of elements by their roles without any options.

• Test Steps:

  • Render the Application component using the render function from @testing-library/react.
  • Use the screen.getByRole function to retrieve elements without specifying any options.
  • Assert that each element is present in the rendered output.

• Expected Result: The test passes if the job location combobox, terms checkbox, and submit button elements are found in the rendered output.

Test 3: Retrieve Headings by Name and Level

• Description: This test case verifies the presence of headings by their names and levels.

• Test Steps:

  • Render the Application component using the render function from @testing-library/react.
  • Use the screen.getByRole function to retrieve headings by their names and levels.
  • Assert that each heading element is present in the rendered output.

• Expected Result: The test passes if the heading with the name "Job description Form" and the heading with level 1 are found in the rendered output.

Test 4: Retrieve Elements by Role and Options

• Description: This test case verifies the presence of elements by their roles and additional options.

• Test Steps:

  • Render the Application component using the render function from @testing-library/react.
  • Use the screen.getByRole function to retrieve elements by their roles and additional options.
  • Assert that each element is present in the rendered output.

• Expected Result: The test passes if the name input element, bio textarea element, and terms checkbox element are found in the rendered output.

Test 5: Retrieve Elements by Label Text

• Description: This test case verifies the presence of elements by their associated label texts.

• Test Steps:

  • Render the Application component using the render function from @testing-library/react.
  • Use the screen.getByLabelText function to retrieve elements by their associated label texts.
  • Assert that each element is present in the rendered output.

• Expected Result: The test passes if the name select element and the terms input element are found in the rendered output.

Test 6 : Retrieve Elements by Placeholder Text, Text, Display Value, Alt Text, Title, and TestID

• Description: This test case verifies the presence of elements by their placeholder text, text content, display value, alt text, title, and test ID.

• Test Steps:

  • Render the Application component using the render function from @testing-library/react.
  • Use the corresponding functions (screen.getByPlaceholderText, screen.getByText, screen.getByDisplayValue, screen.getByAltText, screen.getByTitle, and screen.getByTestId) to retrieve elements by their respective attributes.
  • Assert that each element is present in the rendered output.

• Expected Result: The test passes if the elements with the specified placeholder text, text content, display value, alt text, title, and test ID are found in the rendered output.

Counter Component Test Cases

The test cases provided in this file test the rendering and behavior of the Counter component. This component displays a counter value, an increment button, an input field, and a set button. The counter value can be incremented by clicking the increment button or by entering a value in the input field and clicking the set button.

Test 1: Renders Correctly

• Description: This test case verifies that the Counter component renders correctly.

• Test Steps:

  • Render the Counter component using the render function from @testing-library/react.
  • Use the screen.getByRole function to retrieve the heading element.
  • Use the screen.getByRole function to retrieve the increment button element.
  • Assert that both elements are present in the rendered output.

• Expected Result: The test passes if the heading element and the increment button element are found in the rendered output, indicating that the component rendered correctly.

Test 2: Renders Initial Count of 0

• Description: This test case ensures that the Counter component renders the initial count value of 0.

• Test Steps:

  • Render the Counter component using the render function from @testing-library/react.
  • Use the screen.getByRole function to retrieve the heading element.
  • Assert that the heading element has the text content "0".

• Expected Result: The test passes if the heading element has the text content "0", indicating that the component rendered the initial count value correctly.

Test 3: Increments Count on Button Click

• Description: This test case verifies that the Counter component increments the count value when the increment button is clicked.

• Test Steps:

  • Render the Counter component using the render function from @testing-library/react.
  • Use the screen.getByRole function to retrieve the increment button element.
  • Use the user.click function to simulate a click on the increment button.
  • Use the screen.getByRole function to retrieve the heading element.
  • Assert that the heading element has the text content "1".

• Expected Result: The test passes if the heading element has the text content "1", indicating that the component incremented the count value correctly on button click.

Test 4: Increments Count on Double Click

• Description: This test case ensures that the Counter component increments the count value when the increment button is double-clicked.

• Test Steps:

  • Render the Counter component using the render function from @testing-library/react.
  • Use the screen.getByRole function to retrieve the increment button element.
  • Use the user.dblClick function to simulate a double click on the increment button.
  • Use the screen.getByRole function to retrieve the heading element.
  • Assert that the heading element has the text content "2".

• Expected Result: The test passes if the heading element has the text content "2", indicating that the component incremented the count value correctly on double click.

Test 5: Sets Count on Button Click and Input Change

• Description: This test case verifies that the Counter component sets the count value when the set button is clicked and the input value is changed.

• Test Steps:

  • Render the Counter component using the render function from @testing-library/react.
  • Use the screen.getByRole function to retrieve the input element.
  • Use the user.type function to simulate typing the value "10" into the input field.
  • Assert that the input element has the value "10".
  • Use the screen.getByRole function to retrieve the set button element.
  • Use the user.click function to simulate a click on the set button.
  • Use the screen.getByRole function to retrieve the heading element.
  • Assert that the heading element has the text content "10".

• Expected Result: The test passes if the input element has the value "10" and the heading element has the text content "10", indicating that the component set the count value correctly on button click and input change.

Test 6: Tab Focus Order

• Description: This test case ensures that the focus order is correct when tabbing through the elements in the Counter component.

• Test Steps:

  • Render the Counter component using the render function from @testing-library/react.
  • Use the screen.getByRole function to retrieve the input element, increment button element, and set button element.
  • Use the user.tab function to simulate tabbing through the elements.
  • Assert that the increment button element has focus.
  • Use the user.tab function again.
  • Assert that the input element has focus.
  • Use the user.tab function again.
  • Assert that the set button element has focus.

• Expected Result: The test passes if the focus order is correct, with the increment button element, input element, and set button element receiving focus in that order when tabbing through the elements in the component.

Skill Component Test Cases

The test cases provided in this file test the rendering and behavior of the Skill component. This component displays a list of skills and a login button. After a timeout of 500 milliseconds, the login button is replaced with a "start" button.

Test 1: Renders Correctly

• Description: This test case verifies that the Skill component renders correctly.

• Test Steps:

  • Render the Skill component using the render function from @testing-library/react and provide an array of skills as the skills prop.
  • Use the screen.getByRole function to retrieve the element with the role "list".
  • Assert that the element is present in the rendered output.

• Expected Result: The test passes if the element with the role "list" is found in the rendered output, indicating that the component rendered correctly.

Test 2: Renders a List Correctly

• Description: This test case ensures that the Skill component renders the list of skills correctly.

• Test Steps:

  • Render the Skill component using the render function from @testing-library/react and provide an array of skills as the skills prop.
  • Use the screen.getAllByRole function to retrieve all elements with the role "listitem".
  • Assert that the number of retrieved elements matches the number of skills in the provided array.

• Expected Result: The test passes if the number of retrieved list items matches the number of skills, indicating that the component rendered the list of skills correctly.

Test 3: Renders Login Button

• Description: This test case ensures that the Skill component renders the login button correctly.
• Test Steps:
  • Render the Skill component using the render function from @testing-library/react and provide an array of skills as the skills prop.
  • Use the screen.getByRole function to retrieve the button element with the role "button" and the name "Login".
  • Assert that the button element is present in the rendered output.
• Expected Result: The test passes if the button element with the role "button" and the name "Login" is found in the rendered output, indicating that the component rendered the login button correctly.

Test 4: Does Not Render Start Button Initially

• Description: This test case ensures that the Skill component does not render the start button initially.

• Test Steps:

  • Render the Skill component using the render function from @testing-library/react and provide an array of skills as the skills prop.
  • Use the screen.queryByRole function to check if the button element with the role "button" and the name "start" is present in the rendered output.
  • Assert that the button element is not present in the rendered output.

• Expected Result: The test passes if the button element with the role "button" and the name "start" is not found in the rendered output, indicating that the component does not render the start button initially.

Test 5: Renders Start Button After Timeout

• Description: This test case ensures that the Skill component renders the start button after a timeout of 500 milliseconds.

• Test Steps:

  • Render the Skill component using the render function from @testing-library/react and provide an array of skills as the skills prop.
  • Use the screen.findByRole function with a specified timeout to retrieve the "start" button element.
  • Assert that the "start" button element is present in the rendered output.

• Expected Result: The test passes if the "start" button element is found in the rendered output after the specified timeout.

Users Component Test Cases

The test cases provided in this file test the rendering and behavior of the Users component. This component fetches a list of users from an API endpoint and renders the user names in a list. The test cases cover the correct rendering of the component, the display of the user list, and error handling when fetching the users.

Test 1: Renders Correctly

• Description: This test case verifies that the Users component renders correctly.

• Test Steps:

  • Render the Users component using the render function from @testing-library/react.
  • Use the screen.getByText function to retrieve the element with the text "Users".
  • Assert that the element is present in the rendered output.

• Expected Result: The test passes if the "Users" element is found in the rendered output, indicating that the component rendered correctly.

Test 2: Renders a List of Users

• Description: This test case ensures that the Users component renders a list of users retrieved from the API.

• Test Steps:

  • Render the Users component using the render function from @testing-library/react.
  • Use the screen.findAllByRole function to retrieve all elements with the role "listitem".
  • Assert that the number of retrieved elements matches the expected number of users (e.g., 3).

• Expected Result: The test passes if the number of retrieved user list items matches the expected number, indicating that the component successfully rendered the list of users.

Test 3: Renders Error

• Description: This test case ensures that the Users component renders an error message if there is an issue fetching the users.

• Test Steps:

  • Configure the mock server to return a status of 500 (error) when the component tries to fetch the users.
  • Render the Users component using the render function from @testing-library/react.
  • Use the screen.findByText function to retrieve the element with the text "Error fetching users".
  • Assert that the element is present in the rendered output.

• Expected Result: The test passes if the "Error fetching users" element is found in the rendered output, indicating that the component correctly renders the error message when there is an issue fetching the users.

useCounter Hook Test Cases

The test cases provided in this file test the functionality and behavior of the useCounter custom hook. This hook is designed to manage a counter state within a React component. The test cases ensure that the hook functions correctly, including the initial rendering, acceptance of custom initial values, and the accuracy of the increment and decrement operations.

Test 1: Initial Render Correctly

• Description: This test case verifies that the useCounter hook renders with the default initial count of 0.

• Test Steps:

  • Render the useCounter hook using the renderHook function.
  • Access the result object from the rendered hook.
  • Assert that the count value in the result object is equal to 0.

• Expected Result: The test passes if the count value is 0, indicating that the hook rendered correctly with the default initial count.

Test 2: Accept and Render Same Initial Value

• Description: This test case ensures that the useCounter hook can accept and render a custom initial value.

• Test Steps:

  • Render the useCounter hook using the renderHook function, passing an initialProps object with an initialCount property set to a custom value (e.g., 10).
  • Access the result object from the rendered hook.
  • Assert that the count value in the result object is equal to the custom initial value (e.g., 10).

• Expected Result: The test passes if the count value matches the custom initial value, indicating that the hook accepts and renders the provided initial value correctly.

Test 3: Increment the Counter

• Description: This test case verifies that the increment function of the useCounter hook correctly increments the counter state.

• Test Steps:

  • Render the useCounter hook using the renderHook function.
  • Access the result object from the rendered hook.
  • Use the act function to interact with the hook and call the increment function.
  • Assert that the count value in the result object is incremented by 1.

• Expected Result: The test passes if the count value is incremented by 1, indicating that the increment function updates the counter state correctly.

Test 4: Decrement the Counter

• Description: This test case ensures that the decrement function of the useCounter hook correctly decrements the counter state.

• Test Steps:

  • Render the useCounter hook using the renderHook function.
  • Access the result object from the rendered hook.
  • Use the act function to interact with the hook and call the decrement function.
  • Assert that the count value in the result object is decremented by 1.

• Expected Result: The test passes if the count value is decremented by 1, indicating that the decrement function updates the counter state correctly.

Greet Component Test Cases

The test cases provided in this file validate the rendering and behavior of the Greet component. This component displays a greeting message with a given name.

Test 1: Greeting Should Be Visible (Skipped)

• Description: This test case ensures that the greeting message is visible when the Greet component is rendered.

• Test Steps:

  • Skip the test case using the xit function to exclude it from the test execution.
  • Render the Greet component using the render function from @testing-library/react.
  • Use the screen.getByText function to retrieve the text element containing the word "hello".
  • Assert that the text element is present in the rendered output.

• Expected Result: N/A (The test case is skipped and not executed).

Test 2: Greeting to 'bob'

• Description: This test case ensures that the Greet component displays the correct greeting when provided with the name "bob".

• Test Steps:

  • Enable the test case using the fit function to include it in the test execution.
  • Render the Greet component with the name prop set to "bob" using the render function from @testing-library/react.
  • Use the screen.getByText function to retrieve the text element containing the greeting message "Hello bob".
  • Assert that the text element is present in the rendered output.

• Expected Result: The test passes if the text element containing the greeting "Hello bob" is found in the rendered output.

MuiMode Component Test Cases

The test case provided in this file validates the rendering and behavior of the MuiMode component. This component displays the current mode (e.g., "dark mode" or "light mode") based on the theme provided by the MUI (Material-UI) theme provider.

Test 1: Render Correctly

• Description: This test case ensures that the MuiMode component renders correctly and displays the expected mode text based on the MUI theme.

• Test Steps:

  • Render the MuiMode component using the render function from ../../test-utils.
  • Use the screen.getByRole function to retrieve the heading element.
  • Assert that the heading element has the expected text content, which in this case is "dark mode".

• Expected Result: The test passes if the heading element with the text content "dark mode" is found in the rendered output.