1

My app uses the window object to inject environmental variables at runtime for docker, however my tests are coming back with the error below:

url config:

declare const window: Window &
    typeof globalThis & {
        _env_: any
    }

export const url = window._env_.REACT_APP_API_URL;
export const baseUrl = url;

error in tests as the handlers use the baseUrl, but even if I change the handlers to hardcoded values the below error comes:

● Test suite failed to run TypeError: Cannot read properties of undefined (reading 'REACT_APP_API_URL')

      4 |     }
      5 |
    > 6 | export const url = window._env_.REACT_APP_API_URL;
        |                                 ^
      7 | export const baseUrl = url;

setupTests.tsx

// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
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_API_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())

// silence react-query errors
setLogger({
    log: console.log,
    warn: console.warn,
    error: () => {},
})

Any idea's? So where ever there is an api call I get this error in the tests for jest/React.

Sole
  • 3,100
  • 14
  • 58
  • 112
  • Hey there, I don't believe window gets mocked when running Jest tests. You might have to set your env variable in another way. See if this helps! https://dev.to/darkmavis1980/how-to-mock-environmental-variables-with-jest-2j3c – Amit Maraj May 04 '22 at 17:41
  • hmmm, any other suggestions? – Sole May 04 '22 at 18:08
  • The test runner clearly states, that `_env_` is `undefined`, so probably you didn't set up it properly for tests. Are you sure you augment window object not only for browser build, but for test's node env too? – Temoncher May 04 '22 at 18:43
  • I'm not sure where I would need to do that? @Temoncher – Sole May 04 '22 at 20:59
  • I have updated my question with setup tests – Sole May 04 '22 at 21:06
  • I tried adding in the setUp tests as above but still get the same error. – Sole May 04 '22 at 23:05
  • It seems to me that your `setupTests` should work as expected. Did you try to set `window._env_` inside the actual test right before the api call? Does it behave the same way? – Temoncher May 05 '22 at 15:54
  • Check out this thread https://stackoverflow.com/q/41885841/13104050 – Temoncher May 05 '22 at 15:56
  • Not sure if setupTests is setup correctly for this scenario, totally confused – Sole May 05 '22 at 16:02

1 Answers1

0

you can mock the global window var

test/setup.js

window.env. REACT_APP_API_URL = 'something';

then you need to add in package.json file

"jest": {
    "setupFiles": [
      "./test/setup.js"
    ],

OR

you can define global var in CLI like this

npm run jest -- --globals='{"window": "someUrl", "value": "someValue"}'
Yoel
  • 7,555
  • 6
  • 27
  • 59