React Testing Library

Adrianna Valdivia

  @adriannavaldivi

https://testing-library.com/docs/intro

ABOUT ME

MOTHER

UI ENGINEER @ SALESLOFT

PREVIOUSLY WORKED AT POLAR NOTION AND MAILCHIMP
 

WOMEN WHO CODE ATL EVANGELIST

#1 Best Place to Work in Atlanta
2018 and 2019

What we'll go over

  • What is React Testing Library
     
  • React Testing Library vs DOM Testing Library
     
  • Available Queries
     
  • Steps to writing a test
     
  • Button test example

wHAT is
REACT TESTING LIBRARY?

  • Simple testing library from Kent C. Dodds
     
  • Works with Jest
     
  • Verifies DOM attributes or content triggering click or other events
     
  • Replaces Enzyme

react testing library
v.s.
dom testing library

base library top level library
queries render
firing events cleanup
async utilities act
helpers
DTL RTL

QUERIES

import { render } from '@testing-library/react'

const { getByLabelText } = render(<Login />)

const node = getByLabelText('username')
ByLabelText ByPlaceholderText ByAltText
ByTitle ByRole
ByTestId ByDisplayValue ByText

Basic usage:

npm install --save-dev @testing-library/react

1. Import

 

2. initialize props

 

3. use query

 

4. assert

Steps to testing your component

....

export const BasicComponent = ({ title }) => {
    return(
      <h1>{title}</h1>
    )
}

import React from 'react'
import { fireEvent, render } from '@testing-library/react'

import { BasicComponent } from './BasicComponent'

const getProps = (title = "React Testing Library") => {
  return {
   title
  }
}

describe('Basic Component', () => {
  afterEach(cleanup)

  it('displays the default title text', () => {
    const props = getProps()
    const { getByText } = render(
      <BasicComponent {...props} />
    )

    const title = getByText(props.title)

    expect(title).toBeDefined()
    expect(title).toEqual("React Testing Library")
  })
})

BasicComponent.js

BasicComponent.spec.js

button.js

import React from 'react'
import p from 'prop-types'

import { ButtonContainer } from './Button.styles'

export const Button = ({ text, width, disabled, onClick }) => {
    return (
      <ButtonContainer
        data-testid="text-input-container"
        disabled={disabled}
        width={width}
        onClick={onClick}
      >
        
        {text}
      </ButtonContainer>
    )
  }
)

Button.propTypes = {
  disabled: p.boolean,
  onClick: p.func,
  text: p.string.isRequired,
  width: p.oneOfType([p.string, p.number]),
}

Button.defaultProps = {
  width: 240,
}

button.spec.js

import React from 'react'
import { fireEvent, render } from '@testing-library/react'

import { Button } from './Button'

const getProps = ({ 
    text = "Welcome", 
    width = "250px"
    disabled = false, 
    onClick = jest.fn()
}) => {
  return {
    text,
    width,
    disabled,
    onClick,
  }
}

describe('Button', () => {
  afterEach(cleanup)

  it('renders default props', () => {
    const props = getProps()
    const { getByText } = render(
      <Button {...props} />
    )

    const title = getByText(props.text)

    expect(title).toBeDefined()
    expect(title).toEqual("React Testing Library")
  })

  it('calls onClick if disabled is false', () => {
    const props = getProps()
    const { getByTestId } = render(
      <Button {...props} />
    )

    const button = getByTestId("text-input-container")

    fireEvent.click(button)
    expect(props.OnClick).toHaveBeenCalledTimes(1)
  })

  it('does not call onClick if disabled is false', () => {
    // what test would you write here to get to pass
  })


})

q&a