Tengo un error en mis pruebas que marcan una variable env de ventana como indefinida. Entiendo el error, ya que se basa en el tiempo de ejecución de la aplicación que usa las variables y tal vez no estén definidas al ejecutar la aplicación. Pero no sé dónde en setupTests.tsx, necesitaría definirlo. Hasta ahora la variable se usa así:
índice.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="%PUBLIC_URL%/config.js"></script> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </html>config.js
window._env_ = { REACT_APP_URL: "https://apiurl.com" }cómo se usa en la aplicación:
declare const window: Window & typeof globalThis & { _env_: any } const url = window._env_.REACT_APP_URL; export const apiUrl = url;setupTests.tsx Intenté agregarlo aquí pero aún no funciona
import '@testing-library/jest-dom'; import { setLogger } from 'react-query' import { server } from './mocks/server' declare const window: Window & typeof globalThis & { _env_: any } window._env_.REACT_APP_URL = "https://wwww.xxxxx.com" beforeAll(() => server.listen()) // Reset any request handlers that we may add during the tests, // so they don't affect other tests. afterEach(() => server.resetHandlers()) // Clean up after the tests are finished. afterAll(() => server.close())El error que detiene las pruebas:
● Test suite failed to run TypeError: Cannot read properties of undefined (reading 'REACT_APP_URL') 4 | } 5 | > 6 | const url = window._env_.REACT_APP_URL; | ^ 7 | export const apiUrl = url; 8 | 9 | at Object.<anonymous> (src/utils/Url.tsx:6:26) at Object.<anonymous> (src/mocks/handlers.tsx:3:1) at Object.<anonymous> (src/mocks/server.tsx:2:1) at Object.<anonymous> (src/setupTests.tsx:7:1)La razón por la que está viendo un error: la biblioteca jest que viene automáticamente con un nuevo proyecto create-react-app ya se configuró previamente para usar jsdom como su entorno de prueba ( ref ), lo que significa que la propiedad de la window se definirá durante el tiempo de ejecución de sus pruebas. Sin embargo, _env_ no es una propiedad predeterminada de la variable de window , lo que significa que no está undefined y un intento de acceder a sus propiedades le dará un error. Este problema se puede solucionar asignando un nuevo objeto a la propiedad _env_ , sin embargo, hay otro problema que se interpone en nuestro camino. La siguiente asignación const url = window._env_.REACT_APP_URL; siempre se evaluará antes de que se ejecuten las pruebas. El motivo es que cuando un archivo (en este caso, el archivo setupTests.tsx ) importa otro archivo (por ejemplo, Url.tsx ), la lógica del archivo importado se evalúa de inmediato (casi como si se activara una función invocada implícitamente) y cualquier asignación de variable dentro se ejecuta inmediatamente, por lo tanto, sobrescribir la propiedad _env_ en sus pruebas no funcionará, ya que será demasiado tarde.
Para solucionar este problema : puede simular todo el archivo que contiene las variables y hacer que devuelva lo que necesita utilizando el siguiente código que debe colocarse en la parte superior del archivo de prueba:
jest.mock('./src/utils/Url', () => ({ get apiUrl () { return "https://wwww.xxxxx.com"; } }));