Component with logic

copy.test.tsx

/**
 * @jest-environment jsdom
 */

import { RenderResult }    from '@testing-library/react'
import { matchers }        from '@emotion/jest'
import { render }          from '@testing-library/react'

import React               from 'react'

import { ThemeProvider }   from '@ui/theme'

import { CopyToClipboard } from './copy.component'

expect.extend(matchers)

type CustomRender = (element: React.ReactNode | React.ReactNode[]) => RenderResult

const customRender: CustomRender = (element) => render(<ThemeProvider>{element}</ThemeProvider>)

describe('Copy component', () => {
  let clipboardData = ''

  beforeAll(() => {
    const writeText = jest.fn((data) => {
      clipboardData = data
    })
    const readText = jest.fn(() => clipboardData)

    Object.assign(navigator, {
      clipboard: {
        writeText,
        readText,
      },
    })
  })

  it('value is in component', async () => {
    const { findByText } = customRender(<CopyToClipboard value='123' />)

    expect(findByText('123')).toBeTruthy()
  })

  it('copied value is in line with value', async () => {
    const { getByRole } = customRender(<CopyToClipboard value='123' />)

    const button = getByRole('button')

    button.click()

    expect(await navigator.clipboard.readText()).toEqual('123')
  })
})