имитация полей глобальных объектов, таких как window, с использованием jest

#reactjs #dom #mocking #jestjs #react-testing-library

#reactjs #dom #издевательство #jestjs #react-testing-library

Вопрос:

Я пытаюсь написать код для небольшого служебного класса, который обнаруживает изменение ориентации. К сожалению, единственный способ, который я нашел для доступа к этим полям window.orientation и window.screen.orientation

Я вижу, что window.orientation это устарело. Альтернативой, которую я нашел, является экспериментальный API обнаружения, который не поддерживается в Safari. И поэтому я решил пока придерживаться устаревших API, пока не найду что-нибудь получше.

Теперь другая проблема, с которой я сталкиваюсь, заключается в том, что я имитирую доступ к этим полям только для чтения введите описание изображения здесь

Я сталкиваюсь с аналогичной проблемой при попытке использовать тот же подход с window.orientation .

По сути, свойства, которые мы пытаемся изменить, являются свойствами только для чтения.

Каков правильный подход в этой ситуации?

Обратите внимание на предупреждение об устаревании window.orientation, которое я вижу, присутствует в lib.dom.d.ts

Ответ №1:

Вы можете использовать Object.defineProperty() для этого.

Например.

index.ts :

 export function main() {
  const orientation = window.screen.orientation;
  return orientation.type;
}
  

index.test.ts :

 import { main } from './';

describe('63570675', () => {
  it('should pass', () => {
    Object.defineProperty(window.screen, 'orientation', {
      value: { type: 'landscape-primary' },
    });
    const actual = main();
    expect(actual).toEqual('landscape-primary');
  });
});
  

результат модульного теста с отчетом о покрытии:

  PASS  src/stackoverflow/63570675/index.test.ts
  63570675
    ✓ should pass (5ms)

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |      100 |      100 |      100 |      100 |                   |
 index.ts |      100 |      100 |      100 |      100 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        5.292s, estimated 14s
  

исходный код: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/63570675

Комментарии:

1. Спасибо @slideshowp2, я уверен, что это сработает. Я надеялся на что-то более идиоматичное, чем фактическое изменение глобального объекта. Поскольку ничего подобного не появилось, я предполагаю, что то, что вы предложили, является единственным путем вперед.