Trabajando en escribir una prueba unitaria para un componente grande. He escrito uno antes para un componente más pequeño, pero este tiene varios otros componentes personalizados anidados en su interior. Estoy tratando de seleccionarlo para poder averiguar qué hacer con él, pero ni siquiera puedo llegar a ese punto en este momento.

Componenteprincipal.tsx

Esto es una parte de lo que está siendo renderizado por el componente. PriceOverrideDateRange es otro componente personalizado, y estoy tratando de orientarlo con testID

 <Counter /> <MainComponentRange testID='range' /> <Counter />

Componente principal.prueba.tsx

Esta es la parte de la prueba en la que estoy trabajando.

 it('should be able to change the ranfe', () =>{ //Mock out dependent function with jest //Nothing here right now... //Render with the props you want const { getByTestId } = render( <MainComponent />

);

 //Locate screen components for test const range = getByTestId('range'); //Perform user actions fireEvent.changeText(range, "01/22/2022"); //Measure against expect cases expect(dateRange).toBe("1/22/2022"); });

Y este es el mensaje de error que estoy recibiendo:

 ● Main Component Test › should be able to change the range Unable to find an element with testID: dateRange 143 | 144 | //Locate screen components for test > 145 | const dateRange = getByTestId('range'); | ^ 146 | 147 |