window-resizeto
Version:
A window.resizeTo polyfill for test environments like Jest & JSDOM
74 lines (55 loc) • 3.06 kB
Markdown
# window-resizeto
<!-- releases / versioning -->
[](https://npmjs.org/package/window-resizeto)
[](https://github.com/agilgur5/window-resizeto/releases)
[](https://github.com/agilgur5/window-resizeto/commits/master)
<br><!-- downloads -->
[](https://npmjs.org/package/window-resizeto)
[](https://npmjs.org/package/window-resizeto)
[](https://npmjs.org/package/window-resizeto)
[](https://npmjs.org/package/window-resizeto)
<br><!-- status / activity -->
[](https://github.com/agilgur5/window-resizeto/blob/master/src/index.tsx)
[](https://travis-ci.org/agilgur5/window-resizeto)
[](https://codecov.io/gh/agilgur5/window-resizeto)
<br>
[](https://npmjs.org/package/window-resizeto)
<br>
A [`window.resizeTo`](https://developer.mozilla.org/en-US/docs/Web/API/Window/resizeTo) polyfill for test environments like Jest & JSDOM.
## Installation
`npm i -D window-resizeto`
## Usage
There are a few different ways you can use `window-resizeto`:
- With Jest:
```javascript
// jest.config.js
module.exports = {
setupFilesAfterEnv: [
// polyfill window.resizeTo
'window-resizeto/polyfill'
]
}
```
```javascript
// some-test.spec.js
window.resizeTo(500, 500)
// window is now resize to 500x500
```
- Standalone with the polyfill:
```javascript
import 'window-resizeto/polyfill'
window.resizeTo(500, 500)
// window is now resized to 500x500
```
- With the ponyfill:
```javascript
import { resizeTo } from 'window-resizeto'
resizeTo(window, 500, 500)
// window is now resized to 500x500
```
## How it works
Basically just sets the `window`'s `outerWidth`, `outerHeight`, `innerWidth`, `innerHeight`, and fires a `resize` event.
The source code is currently just <10 LoC, so [take a look under the hood](./src/)! :)
## Credits
Inspiration for creating this came from [`mq-polyfill`](https://github.com/bigslycat/mq-polyfill) and a few [other](https://spectrum.chat/testing-library/help-react/how-to-set-window-innerwidth-to-test-mobile~70aa9572-b7cc-4397-92f5-a09d75ed24b8?m=MTU1OTU5MTI2MTI0MQ==) code samples that are nearly exact replicas.
I wanted a package I could re-use in my projects' tests instead of having to constantly create a helper file, and so `window-resizeto` was born!