React Testing Summary

• Introduction

  • Install and setup

    Jest and React testing library are installed as a part of create-react-app

    • Install

        
        npx create-react-app my-app --template typescript
        npm i -D eslint-plugin-testing-library eslint-plugin-jest-dom @testing-library/user-event
        Add extension in the VS code - ESLint
      

    ---

    • Replace in package.json the eslintConfig section:

        "eslintConfig": {
          "plugins": [
            "testing-library",
            "jest-dom"
          ],
          "extends": [
            "react-app",
            "react-app/jest",
            "plugin:testing-library/react",
            "plugin:jest-dom/recommended"
          ]
        },
      

    ---

    • Configure ESLint in VSCode - settings --> open settings.json and update

        "eslint.validate": [    
          {
            "language": "javascriptreact",
            "autoFix": false
          },
          {
            "language": "typescript",
            "autoFix": false
          },
          {
            "language": "typescriptreact",
            "autoFix": false
          },
          ...
        ],
        "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
        "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
      

  ---

  • React testing library - Cheatsheet
  
  
  • User Events in testing-library
  
  
  • Definition of Roles
    
    
  • testing-library/jest-dom

---

• Main concepts

  • Test interactivity using userEvent (not fireEvent)

    userEvent.click(colorButton);

  • jest-dom assertions

    • toBeEnabled() // for button
    • toBeDisabled()
    • .toBeChecked() // for a checkbox
    • .not.toBeChecked()
  
  

  • getByRole option { name: }

    screen.getByRole('button', { name: 'Change to blue'}) // name = displayed text

  • getAllByRole option { name: }

    - search for more than one match to role

  • Jest describe to group of tests

  • For asynchronous DOM update of elements

    await find...

    await findAllByRole

      test('Displays image for each scoop option from server', async () => {
        render();
    
        // Find images
        const scoopImages = await screen.findAllByRole('img', { name: /scoop$/i });
        expect(scoopImages).toHaveLength(2);
    
        // Confirm alt text of images
        // @ts-ignore
        const altText = scoopImages.map(element => element.alt);
        expect(altText).toEqual(['Chocolate scoop', 'Vanilla scoop']);
      });
    

  • Wait for two responses from server

      await waitFor(async () => {
        const alerts = await screen.findAllByRole('alert');
        expect(alerts).toHaveLength(2);
    
        const alertsTexts = await screen.findAllByText(
          /An unexpected error occurred. Please try again later./i
        );
        expect(alertsTexts).toHaveLength(2);
      });
    

---

• screen Query Methods

  command[All]ByQueryType

  command

  • get: expect element to be in the DOM
  • query: expect element not to be in the DOM
  • find: expect element to appear async

  [All]

  • (exclude) expect only one match
  • (include) expect more than one match

  QueryType

  • Role (most preferred)
  • AltText (images)
  • Text (display elements)
  • Form elements
    • PlaceholderText
    • LabelText
    • DisplayValue

  React testing library - Cheatsheet

  Queries

  Priority

---

• Simple Example


• Checkbox And Popover Example


• Mock Server Worker