styleguide icon indicating copy to clipboard operation
styleguide copied to clipboard

Error using InputCurrency with fireEvent.change and userEvent.type

Open jefersonvinicius-alive opened this issue 2 years ago • 0 comments

Describe the bug When I'am using the InputCurrency in tests I getting the error below:

Error: Uncaught [ReferenceError: event is not defined]

To Reproduce Just run the tests below:

import { fireEvent, render, screen } from '@vtex/test-tools/react'
import React, { useState } from 'react'
import userEvent from '@testing-library/user-event'
import { InputCurrency } from 'vtex.styleguide'

function Sut() {
  const [value, setValue] = useState()

  return (
    <div>
      <InputCurrency
        testId="input-testid"
        name="input"
        locale="pt-BR"
        currencyCode="BRL"
        value={value}
        onChange={({ target }: any) => setValue(target.value)}
      />
      <span data-testid="raw-value-span">Raw Value: {value}</span>
    </div>
  )
}

test('currency input with fireEvent.change', async () => {
  render(<Sut />)

  const input = screen.getByTestId('input-testid')
  const nativeInput = input.querySelector('input[name="input"]')

  fireEvent.change(nativeInput!, { target: { value: '1' } })

  expect(screen.getByTestId('raw-value-span')).toHaveTextContent('Raw Value: 1')
})

test('currency input with userEvent.type', async () => {
  render(<Sut />)

  const input = screen.getByTestId('input-testid')
  const nativeInput = input.querySelector('input[name="input"]')

  userEvent.type(nativeInput!, '2')

  expect(screen.getByTestId('raw-value-span')).toHaveTextContent('Raw Value: 2')
})

Expected behavior The tests pass

jefersonvinicius-alive avatar Apr 27 '22 18:04 jefersonvinicius-alive