Tengo un elemento que tiene una combinación de texto estático y dinámico en la misma línea.
Al probar esta línea de texto mediante una subcadena que incluye parte del texto estático y dinámico, falla y muestra que la salida se divide en varias líneas con las divisiones antes y después de la sección dinámica.
¿Qué está pasando? ¿Por qué no puedo probarlo de la manera que espero? ¿Cómo probaría esto correctamente?
Código.jsx
const dynamicText = 'all be on one line'; return <div>This should {dynamicText} like I expect.</div>Código.spec.js
it('Should have dynamic text on one line', () => { const {getByText} = render(<Code />); expect(getByText('should all be on one line ')).toBeTruthy(); });Salida de prueba
Unable to find an element with the text: ... This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. ... <div> This should all be on one line like I expect </div>Descubrí una manera en la que esto se puede hacer fácilmente.
En mi código, estaba tratando de hacer coincidir una subcadena de la cadena completa, ya que simplemente estaba interesado en verificar que la parte dinámica se procesara correctamente. Especificar la cadena que estoy buscando entre comillas (simple o doble) parece hacer que RTL vea esto como una cadena definitiva.
En cambio, cambié las comillas simples para que sea más un estilo de expresiones regulares, por lo que cambié 'should all be on one line' a /should all be on one line/ .
La prueba ahora pasa :)