Skip to content

Latest commit

 

History

History
445 lines (284 loc) · 7.7 KB

deck.mdx

File metadata and controls

445 lines (284 loc) · 7.7 KB
Raw

import { Image, Notes } from "mdx-deck"; import { CodeSurfer, CodeSurferColumns, Step, } from "code-surfer"; import { github, vsDark } from "@code-surfer/themes"; import todoList from "./images/todo-list.gif"; import citiesList from "./images/cities-list.gif";

export const theme = vsDark;

RTL + MSW = !!!

The latest in frontend testing

<img src="https://media1.giphy.com/media/SQiQu6lbG8bn2/giphy.gif?cid=ecf05e47c06ljbs1bj3lddbkoba2zw9agdbj05m7eceigow8&rid=giphy.gif&ct=g" style={{ height: "100%", width: "100%", objectFit: "inherit", }} />

What is React Testing Library?

  • Lightweight solution for testing React components
  • Built on DOM Testing Library
  • Encourages better testing practices
“The more your tests resemble the way your software is used, the more confidence they can give you.”
DOM Testing Library is a lightweight solution for testing DOM nodes. It provides utilities to query the DOM the same way the user would.

Examples:

  • Finding form elements by their label text
  • Finding links and buttons from their text
  • Exposes a data-testid attribute as an escape hatch for elements lacking text content, labels or accessible ways to find them

Differences with Enzyme

  • RTL does not test implementation details (props, state, etc)
  • RTL is full DOM rendering only
  • Enzyme does not fully support React hooks
  • RTL now bundled with create-react-app
What is the user trying to do?
Notes:
  • RTL only cares about the interactions between the user and the browser, not the internals of React
  • One problem with testing implementation details is that refactoring can often break tests
  • Example: if you rename a state value or change its type from a string to an array
  • RTL focuses mainly on integration tests. Child components aren't mocked like Enzyme's shallow rendering.
  • Lifecycle hooks such as useEffect are not supported in Enzyme's shallow rendering since those hooks don't get called.
  • There are workarounds, but they aren't pretty.

RTL Query Methods

  • getByRole
  • getByLabelText
  • getByPlaceholderText
  • getByText
  • getByDisplayValue
  • getByAltText
  • getByTitle
  • getByTestId
Notes:
  • Button, textbox, etc (also pass in config with name, etc)
  • Good for form fields
  • Next best option for form fields
  • Best for divs, spans, paragraphs
  • Current value of the form, useful for filled-in values
  • For elements that support alt text (img, area, input)
  • Used rarely, title attribute is not consistently read by screenreaders
  • If all else fails

<img src="https://media0.giphy.com/media/AOSwwqVjNZlDO/giphy.gif?cid=ecf05e47o5edhi3sgt6o67ekcv34vwxyyuvknfk8t5x4vckt&rid=giphy.gif&ct=g" style={{ height: "100%", width: "100%", objectFit: "inherit", }} />

<CodeSurferColumns themes={[vsDark, github]} title="Hello, World!">































<CodeSurferColumns themes={[vsDark, github]} title="Todo List">






























TestingLibraryElementError: Unable to find an accessible element with the role "button" and name `/Your todo/`

Here are the accessible roles:

heading:

Name "Todo List":
<h2 />

--------------------------------------------------
textbox:

Name "Your todo":
<input
  aria-label="Your todo"
  name="todo"
  placeholder="Add todo..."
  required=""
  type="text"
  value=""
/>

--------------------------------------------------
button:

Name "Add":
<button
  type="submit"
/>

--------------------------------------------------
list:

Name "":
<ul />

--------------------------------------------------









Mock Service Worker




Notes:

    

  • Uses the browser's Service Worker API to create a mock server
    • 

  • This intercepts network requests and handles them with our mocked responses
    • 

  • Defines mocks at the network level
    • 



Advantages:


    

  • You don't have to explicitly mock fetch or axios every time you need to use it
    • 

  • If you have multiple components using the same request, you can mock it out in one location
    • 

  • Can also be used in the browser as well (you can see all actual network requests)
    • 







// jest.setup.js

import "@testing-library/jest-dom";
import { mswServer } from "./mocks/msw-worker";

beforeAll(() => mswServer.listen());
afterEach(() => mswServer.resetHandlers());
afterAll(() => mswServer.close());



Notes:

    

  • Start server listening at the beginning of any test run
    • 

  • Reset handlers to initial chosen values
    • 

  • Close the server after every test run
    • 







// ./mocks/msw-worker.js

import { setupServer } from "msw/node";
import { handlers } from "./handlers";

export const mswServer = setupServer(...handlers);











<CodeSurferColumns themes={[vsDark, github]} title="Cities List">





























Thank You!




Built using: MDX Deck and Code Surfer


Links: Demo App and Presentation Code