mocking fields of global objects like window using jest - reactjs

Question

I am trying to write code for a small utility class that detects change in orientation. Unfortunately, the only way I found to access these fields window.orientation and window.screen.orientation
I can see that window.orientation is deprecated. The alternative I found is the experimental detection api that is not supported on Safari. And so I decided to stick to the deprecated apis for now till I find something better.
Now the other challenge I am facing is whilst mocking access to these readonly field
I am facing a similar problem when trying same approach with window.orientation.
Essentially properties we are trying to alter are readonly properties.
What is the correct approach in this situation?
Note the deprecation warning for window.orientation that I see is present in lib.dom.d.ts

Answer 1

You can use Object.defineProperty() to do this.
E.g.
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');
});
});
unit test result with coverage report:
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
source code: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/63570675