Como testar o que tem na área de transferência e um select multíplo

it('should copy bankslipCode', async () => { render(<BankSlipDetails {...requiredProps} />) await navigator.permissions.query({ name: 'clipboard-write' }) const btn = screen.getByRole('button', { name: /copiar código/i }) let clip = '' userEvent.click(btn) await navigator.clipboard.readText().then((text) => { clip = text }) expect(clip).toContain(requiredProps.code) })

Fala ai Kaique, tudo bem? Supondo que tu tem um componente assim:

function App() {
  const inputRef = useRef()

  const handleCopy = () => {
    navigator.clipboard.writeText(inputRef.current.value)
  }

  return (
    <div className="App">
      <header className="App-header">
        <input data-testid="field" ref={inputRef} defaultValue="TEXTO COPIADO" />
        <button data-testid="button" onClick={handleCopy} type="button">Copy</button>
      </header>
    </div>
  );
}

Os testes poderiam ser algo assim:

describe('Tests for App component', () => {
  beforeEach(() => {
    navigator.clipboard = {
      writeText: jest.fn(),
    }
  })

  it('renders learn react link', async () => {
    render(<App />);

    fireEvent.click(screen.getByTestId('button'))

    expect(navigator.clipboard.writeText).toHaveBeenCalledTimes(1)
    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('TEXTO COPIADO')
  });
})

Espero ter ajudado.