React Component Test

[cjmling]

There seems to be multiple way of setting up the test.

Way 1

import React from 'react'
import { render, unmountComponentAtNode } from 'react-dom'
import { act } from 'react-dom/test-utils'

import FilterRange from '../../../components/filter/filter-range/filter-range'

let container: any = null
beforeEach(() => {
  // setup a DOM element as a render target
  container = document.createElement('div')
  document.body.appendChild(container)
})

afterEach(() => {
  // cleanup on exiting
  unmountComponentAtNode(container)
  container.remove()
  container = null
})

describe('Range Filter', () => {
  it('renders filter range buttons', () => {
    act(() => {
      render(
        <FilterRange onSearchStateChange={() => {}} facetsStats={{}} />,
        container
      )
    })

    expect(container.textContent).toContain('Total Value Locked')
    expect(container.textContent).toContain('APY')

    const tvlButton = document.querySelector('#tvl-filter-button')
    act(() => {
      tvlButton.dispatchEvent(new MouseEvent('click', { bubbles: true }))
    })

    expect(container.textContent).toContain('Filter by TVL')
  })
})

[cjmling]

Way 2

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

import FilterRange from '../../../components/filter/filter-range/filter-range'

test('loads items eventually', async () => {
  const { container, getByText } = render(
    <FilterRange onSearchStateChange={() => {}} facetsStats={{}} />
  )

  expect(container.textContent).toContain('Total Value Locked')
  expect(container.textContent).toContain('APY')

  // Click apy button
  fireEvent.click(screen.getByText('APY'))

  // Check if modal open and have filter by apy text header
  expect(container.textContent).toContain('Filter by apy')
})