使用酶模拟打字稿类导入

Question

I try to test this Typescript class with Jest (snippet so you get the idea):

import OrderService from '../../../services/api/OrderService';

class InstallationOverview {
  // using OrderService somewhere
  // ...
}

In my test I use enzyme

shallow(<InstallationOverview />);

I get the following error:

TypeError: Cannot read property 'AUTH_SERVER_URL' of undefined

  1 | class Envs {
  2 | 
> 3 |   static AUTH_SERVER_URL = window["env"]["AUTH_SERVER_URL"];
    |                            ^
  4 |   static AUTH_CLIENT_SECRET = window["env"]["AUTH_CLIENT_SECRET"];
  5 |   static SENSOR_TEST_SERVICE_WS = window["env"]["SENSOR_TEST_SERVICE_WS"];
  6 |   static SENSOR_TEST_SERVICE_URL = window["env"]["SENSOR_TEST_SERVICE_URL"];

  at Object.<anonymous> (src/util/Envs.tsx:3:28)
  at Object.<anonymous> (src/services/SensorTestWebsocketClient.tsx:3:1)
  at Object.<anonymous> (src/redux/reducers/index.js:17:1)
  at Object.<anonymous> (src/redux/store/index.js:2:1)
  at Object.<anonymous> (src/util/NotificationManager.tsx:1:1)
  at Object.<anonymous> (src/services/api/RestService.tsx:2:1)
  at Object.<anonymous> (src/services/api/OrderService.tsx:1:1)
  at Object.<anonymous> (src/content/order/installation/InstallationOverview.tsx:21:1)
  at Object.<anonymous> (src/tests/InstallationOverview.test.jsx:2:1)´´´

As you can see env object in window is missing. BUT for testing the InstallationOverview class I don't need all other services imported by the OrderService.

I already tried mocking it with

jest.mock('./src/services/api/OrderService');

but this doesn't have any impact, I think this applies AFTER shallowing, so after the exception.

then I tried to create a mock file for OrderService and put it under __mocks__ both relative to the test and to the target class.

then I tried setting jest config in package.json to

"jest": {
   "moduleNameMapper": {
     "OrderService": "<rootDir>/tests/__mocks__/OrderService.tsx"
   }
 }

However, I mixed up jest and enzyme because I don't have any idea now to get it work.

Answer 1

Using jest.mock is the right approach. Since the new version of react I declared my src folder as root folder so I had to adjust the path to mock services/api/OrderService and I moved the mock call outside the it() function to the class route