@navinc/base-react-components/src/sba-resources.spec.js

Nav's Pattern Library

import { Toggle } from './sba-resources.js'
import { renderWithContext } from './tests/with-app-context.js'
import { fireEvent, screen } from '@testing-library/react'
import { Button } from './button.js'

describe('Toggle', () => {
  it('changes isOpen on click', () => {
    renderWithContext(
      <Toggle>
        {({ isOpen, toggle }) => (
          <>
            <Button onClick={toggle}>Content</Button>
            {isOpen ? 'OPEN' : 'CLOSED'}
          </>
        )}
      </Toggle>
    )

    expect(screen.queryByText('OPEN')).not.toBeInTheDocument()
    fireEvent.click(screen.getByText(/content/i))
    expect(screen.getByText('OPEN')).toBeInTheDocument()
  })
})