styleguide
styleguide copied to clipboard
Error using InputCurrency with fireEvent.change and userEvent.type
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