使用酶模拟打字稿类导入

Question

我尝试用Jest测试这个Typescript类（摘要，这样您就可以了：）

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

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

在测试中，我使用酶

shallow(<InstallationOverview />);

我收到以下错误：

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)´´´

您可以看到窗口中的env对象丢失。但是，用于测试InstallationOverview类的我不需要OrderService导入的所有其他服务。

我已经尝试过用它嘲笑它

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

但是这没有任何影响，我认为这适用于浅化之后，因此在例外之后。

然后，我尝试为OrderService创建一个模拟文件，并将其相对于测试和目标类都放置在__mocks__下。

然后我尝试将package.json中的jest配置设置为

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

但是，我混合开玩笑和酶，因为我现在不知道如何使它起作用。

Answer 1

使用jest.mock是正确的方法。由于新版本的react我宣布我的src文件夹为根文件夹，所以我不得不调整路径以模拟services/api/OrderService