javascript - 如何在 TypeScript 中使用 jest 模擬全局 window 對象

有人知道我該如何模擬 window 物件來測試 feature 的值嗎？以下是我的概念程式碼，我想測試如果 expEnabled 是啟用，feature 的值應該是 'exp is enabled'，否則 feature 是 'exp is disable'。我已經嘗試在 jest 中模擬 global.window 和在 Jest 中模擬 globals，但對我來說似乎不起作用。

更新：將程式碼 const expEnabled=typeof window !== 'undefined' && !!window?.app?.initialAppProps?.exp?.my_feature; 移入函數後，似乎使用 Object.defineProperty 能夠生效。

//source code
import Koa from 'koa';
export interface InitialAppProps {
  exp: Koa.DefaultState['exp'];

}
const expEnabled = typeof window !== 'undefined' && !!window?.app?.initialAppProps?.exp?.my_feature;

export function testMock(){
  return typeof window !== 'undefined' && !!window?.app?.initialAppProps?.exp?.my_feature;
}

//app is Functional component of my app from react
export const feature = [expEnabled  ? 'exp is enabled' : 'exp is disable']
export const featureNew = [testMock()  ? 'exp is enabled' : 'exp is disable']



//test code
describe('expEnabled', () => {
  it('feature should be enabled if expEnabled is trued', () => {
/*
    how can I mock expEnabled is true?
    I have tried this and console.log before expect. the right value print out but I still fail on expect
    Object.defineProperty(global, 'window', {
       value: {
         app: {initialAppProps: {exp: {my_feature: true}}},
       },
       writable: true,
     });
*/
    expect(feature).toEqual('exp is enabled');
  });
  it('feature should be enabled if expEnabled is trued', () => {
    Object.defineProperty(global, 'window', {
       value: {
         app: {initialAppProps: {exp: {my_feature: true}}},
       },
       writable: true,
     });
     expect(featureNew).toEqual('exp is enabled');
  })
});

答案＃1

只需給 window.app.initialAppProps.exp.my_feature 賦值即可。你需要在執行每個測試案例之前重置模組，因為 ./index 模組會被緩存在 require.cache 對象中。這表示 expEnabled 變數的值也會被緩存。

例如

index.ts：

declare global {
  interface Window {
    app: {
      initialAppProps: {
        exp: {
          my_feature: boolean;
        };
      };
    };
  }
}

const expEnabled = typeof window !== 'undefined' && !!window.app.initialAppProps.exp.my_feature;
export const feature = [expEnabled ? 'exp is enabled' : 'exp is disable'];

index.test.ts：

describe('67041178', () => {
  beforeAll(() => {
    window.app = {
      initialAppProps: {
        exp: { my_feature: false },
      },
    };
  });
  beforeEach(() => {
    jest.resetModules();
  });
  it('should enable', () => {
    window.app.initialAppProps.exp.my_feature = true;
    const { feature } = require('./');
    expect(feature).toEqual(['exp is enabled']);
  });

  it('should disable', () => {
    window.app.initialAppProps.exp.my_feature = false;
    const { feature } = require('./');
    expect(feature).toEqual(['exp is disable']);
  });
  it('should pass', () => {
    Object.defineProperty(global, 'window', {
      value: {
        app: { initialAppProps: { exp: { my_feature: true } } },
      },
      writable: true,
    });
    const { feature } = require('./');
    expect(feature).toEqual(['exp is enabled']);
  });
});

單元測試結果：

 PASS  examples/67041178/index.test.ts (13.133 s)
  67041178
    ✓ should enable (8 ms)
    ✓ should disable (1 ms)
    ✓ should pass (1 ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        14.167 s

源代碼：https://github.com/mrdulin/jest-v26-codelab/tree/main/examples/67041178