87

Jest 中是否有任何方法可以模拟全局对象，例如navigator, 或Image*？我几乎已经放弃了这一点，并把它留给了一系列可模拟的实用方法。例如：

// Utils.js
export isOnline() {
    return navigator.onLine;
}

测试这个微小的功能很简单，但很麻烦，而且根本不是确定性的。我可以到达那里的 75%，但这大约是我能做到的：

// Utils.test.js
it('knows if it is online', () => {
    const { isOnline } = require('path/to/Utils');

    expect(() => isOnline()).not.toThrow();
    expect(typeof isOnline()).toBe('boolean');
});

另一方面，如果我对这种间接方式没问题，我现在可以navigator通过这些实用程序访问：

// Foo.js
import { isOnline } from './Utils';

export default class Foo {
    doSomethingOnline() {
        if (!isOnline()) throw new Error('Not online');

        /* More implementation */            
    }
}

...并像这样进行确定性测试...

// Foo.test.js
it('throws when offline', () => {
    const Utils = require('../services/Utils');
    Utils.isOnline = jest.fn(() => isOnline);

    const Foo = require('../path/to/Foo').default;
    let foo = new Foo();

    // User is offline -- should fail
    let isOnline = false;
    expect(() => foo.doSomethingOnline()).toThrow();

    // User is online -- should be okay
    isOnline = true;
    expect(() => foo.doSomethingOnline()).not.toThrow();
});

在我使用过的所有测试框架中，Jest 感觉是最完整的解决方案，但任何时候我编写笨拙的代码只是为了使其可测试，我觉得我的测试工具让我失望了。

这是唯一的解决方案还是我需要添加 Rewire？

*别傻笑。Image非常适合 ping 远程网络资源。

4

6 回答 6

116

由于每个测试套件都运行自己的环境，您可以通过覆盖它们来模拟全局变量。所有全局变量都可以通过global命名空间访问：

global.navigator = {
  onLine: true
}

覆盖仅对您当前的测试有影响，不会影响其他测试。Math.random这也是处理or的好方法Date.now。

请注意，通过jsdom中的一些更改，您可能必须像这样模拟全局变量：

Object.defineProperty(globalObject, key, { value, writable: true });
于 2016-11-07T08:02:57.090 回答
21

自从编写了接受的答案以来，Jest 可能已经改变，但 Jest 在测试后似乎没有重置您的全局。请参阅随附的测试用例。

https://repl.it/repls/DecentPlushDeals

据我所知，解决此问题的唯一方法是使用afterEach()orafterAll()清理您对global.

let originalGlobal = global;
afterEach(() => {
  delete global.x;
})

describe('Scope 1', () => {
  it('should assign globals locally', () => {
    global.x = "tomato";
    expect(global.x).toBeTruthy()
  });  
});

describe('Scope 2', () => {
  it('should not remember globals in subsequent test cases', () => {
    expect(global.x).toBeFalsy();
  })
});
于 2018-06-19T19:46:03.477 回答
20

这样做的正确方法是使用spyOn. 这里的其他答案，即使它们有效，也不要考虑清理和污染全局范围。

// beforeAll
jest
  .spyOn(window, 'navigator', 'get')
  .mockImplementation(() => { ... })

// afterAll
jest.restoreAllMocks();
于 2020-05-12T19:38:08.170 回答
8

如果有人需要使用静态属性模拟全局，那么我的示例应该会有所帮助：

  beforeAll(() => {
    global.EventSource = jest.fn(() => ({
      readyState: 0,
      close: jest.fn()
    }))

    global.EventSource.CONNECTING = 0
    global.EventSource.OPEN = 1
    global.EventSource.CLOSED = 2
  })
于 2019-02-22T13:49:39.867 回答
4

如果您正在使用react-testing-library并使用cleanup库提供的方法，一旦文件中的所有测试都运行，它将删除该文件中的所有全局声明。这将不会延续到任何其他运行的测试。

例子：

import { cleanup } from 'react-testing-library'

afterEach(cleanup)

global.getSelection = () => {

}

describe('test', () => {
  expect(true).toBeTruthy()
})
于 2019-09-18T21:39:23.453 回答
1

如果您需要分配和重新分配属性的值，window.navigator那么您需要：

  1. 声明一个非常量变量
  2. 从全局/窗口对象返回
  3. 更改该原始变量的值（通过引用）

这将在尝试重新分配值时防止错误，window.navigator因为这些大多是只读的。

let mockUserAgent = "";

beforeAll(() => {
  Object.defineProperty(global.navigator, "userAgent", {
    get() {
      return mockUserAgent;
    },
  });
});

it("returns the newly set attribute", () => {
  mockUserAgent = "secret-agent";
  expect(window.navigator.userAgent).toEqual("secret-agent");
});
于 2021-05-05T20:47:24.003 回答