Necesito probar los valores de useRef.current.selectionStart
y useRef.current.selectionEnd
una vez que se hayan cambiado en una interacción onKeyDown
con una entrada.
índice.tsx
import React, { useRef, useEffect } from 'react' type Props { value: string ...aBunchOfProps } const SomeComponent: FC<Props> = ({ value, ...aBunchOfProps }) => { const inputRef = useRef(null) const [caretPosition, setCaretPosition] = useState<CaretPosition | undefined>() useEffect(() => { if (!!caretPosition && !!value) { let newCaretPosition = caretPosition.currentPosition const shouldMoveCaretForward = caretPosition.direction === 1 && value.charAt(caretPosition.currentPosition) === '/' if (shouldMoveCaretForward) { newCaretPosition++ } inputRef.current.selectionStart = newCaretPosition <=== this is the line I want to test inputRef.current.selectionEnd = newCaretPosition <=== this is the line I want to test } }, [caretPosition]) const someFunction = () => { // calls setCaretPosition with new details } return ( ...someAdditionalCode <input ...someAdditionalProps ref={inputRef} value={value} data-testid="input-field" onKeyDown={() => someFuction()} /> ...evenMoreCode ) } export default SomeComponent
índice.prueba.tsx
describe('SomeComponent tests', () => { it('should move cursor correctly', () => { const { getByTestId } = render(<SomeComonent value="12/3" />) const input = getByTestId('input-field') fireEvent.keyDown(input, { key: '4' }) // expect(useRef.current.selectionStart).toEqual(5) <==== I want something like this // expect(useRef.current.selectionEnd).toEqual(5) <==== I want something like this }) })
Cualquier sugerencia sería útil.
Había revisado tu código. Puede que no sea posible verificar useRef en el archivo testcase. verifique la imagen que se muestra a continuación [![ingrese la descripción de la imagen aquí y también comparta el enlace del documento, para que pueda ser útil para usted.
enlace del documento: https://testing-library.com/docs/guiding-principles/