Aquí está la versión abstracta de mi componente.
const Test = () => { const { register } = useFormContext(); const mRef = useThirdpartyHook(); // Third party hook returns a ref const { ref, ...rest } = register('test'); return ( <input type="text" name="test" {...rest} ref={(e) => { ref(e); mRef.current = e; }} /> ); }; export default Test;Caso de prueba
import React from 'react'; import { render } from '@testing-library/react'; import { FormProvider } from 'react-hook-form'; import Test from './Test'; describe('<Test> component', () => { it('renders default correctly', () => { const wrapper = render( <FormProvider {...{ register: () => jest.fn() }}> <Test /> </FormProvider> ); expect(wrapper.baseElement).toMatchSnapshot(); }); });La ejecución de esta prueba arroja un error como se indica a continuación.
<Test> component › renders default correctly TypeError: ref is not a function ref={(e) => { ref(e); ^ mRef.current = e; }}Traté de burlarme de la referencia como función, pero no sirvió de nada. Sería genial si alguien puede arrojar algunas ideas.
register es una función que devuelve los accesorios que necesita la entrada. Se está burlando de la función de register , pero aún necesita devolver todo lo que el componente está consumiendo o transmitiendo. Específicamente, parece que necesita devolver una función de ref para lo que devuelve el gancho useFormContext .
Ejemplo:
describe('<Test> component', () => { it('renders default correctly', () => { const registerMock = () => ({ ref: jest.fn(), .... mock other necessary bits here }); const wrapper = render( <FormProvider {...{ register: registerMock }} > <Test /> </FormProvider> ); expect(wrapper.baseElement).toMatchSnapshot(); }); });