如何将 window 设置为 undefined 以便在同构应用程序中测试 SSR 渲染？答案

【问题标题】：How can I set window to undefined in order to test the SSR rendering in an isomorphic application?如何将 window 设置为 undefined 以便在同构应用程序中测试 SSR 渲染？
【发布时间】：2019-01-04 11:55:12
【问题描述】：

我一直在尝试在未定义窗口时测试 else 块。当我使用 Next.js 时，窗口将在服务器端渲染 (SSR) 期间未定义。目前我找不到这样做的方法。

非常感谢任何帮助。

我尝试在测试中和函数前的定义中设置window = undefined 和global.window = undefined（所有选项和每个选项）。两种方法都没有成功。

当谷歌搜索我能找到的最接近的答案是模拟或监视窗口方法时，但这并不能解决我的问题。我还发现有人注意到您可以将测试作为 Node 应用程序（因此是 SSR）运行，但不确定如何为一个测试完成。

我在下面提供了一个示例，说明我正在尝试测试什么以及如何测试。

要测试的函数

export default () => {
   console.log(typeof window); // This is always an object and never undefined
   const language =
      typeof window !== 'undefined'
          ? window.navigator.userLanguage || window.navigator.language || 'en'
          : 'en';

   return language;
};

笑话测试

import getLanguage = './getLanguage';

describe('Get Language SSR', () => {
    const realWindow = window;

    beforeAll(() => {
        window = undefined;
    });

    afterAll(() => {
        window = realWindow;
    });

    it('should return "en"', () => {
         expect(getLanguage()).toEqual('en');
    })
});

代码覆盖率表明 else 块永远不会被命中。

【问题讨论】：

标签： javascript jestjs isomorphic-javascript

【解决方案1】：

"By adding a @jest-environment docblock at the top of the file, you can specify another environment to be used for all tests in that file":

/**
 * @jest-environment node
 */

import getLanguage from './getLanguage';

describe('Get Language SSR', () => {

  it('should return "en"', () => {
    expect(getLanguage()).toEqual('en');  // SUCCESS
  })

});

@jest-environment docblock 会将此测试文件 的测试环境设置为node，从而导致window 为undefined 并导致测试通过。

【讨论】：