した。

エラーになるコード

const { JSDOM } = require('jsdom');
const sinon = require('sinon');

const dom = new JSDOM();
dom.window.localStorage.setItem('foo', 'bar');
// SecurityError: localStorage is not available for opaque origins

解決

new JSDOM() のところで、 url を適当に設定してやれば解決します。

const dom = new JSDOM('', { url: 'https://localhost' });

原因

件の url の初期値が about:blank で、URLがそれだと localStorage が駄目なので。

試しにブラウザーで about:blank を開いてコンソールから localStorage を触ろうとしても同じようなエラーが出ます。

MDNに説明があります。

• Window.localStorage – Web API | MDN

例外

SecurityError

リクエストがポリシーの決定に反している、またはオリジンが妥当な scheme/host/port tupleでない (これは例えば、オリジンが file: や data: スキームを使うときに起こります)。例えば、ユーザーがブラウザー設定で特定オリジンへのデータ永続化のパーミッションを拒否していることもあります。

参考

• Window.localStorage – Web API | MDN
• JSDom 11.12 causes SecurityError: localStorage is not available for opaque origins · Issue #6766 · facebook/jest
  • comment … なんかJestでこういうエラーが出て、設定が必要（だった？）らしい

正直これで良いのかわからないけど、とりえあえず手元の clientWidth の値を使う処理の試験は走るようになった。

メソッド系

しれっとstub的な関数で上書きする。

const { JSDOM } = require('jsdom');

const dom = new JSDOM();
const el = dom.window.document.createElement('div');

console.log(el.getBoundingClientRect()); // => { width: 0, top: 0, ... }

// こうする
el.getBoundingClientRect = () => ({
  width: 200,
});
console.log(el.getBoundingClientRect()); // => { width: 200 }

試験を通すだけなので不要な値まで全部書く必要はない。

本当なら sinon.stub() ↓の方が丁寧な感じがするけど、まあ使い捨てるインスタンスだし、良いでしょ。

sinon.stub(el, 'getBoundingClientRect").returns({ width: 200 });

プロパティ系

clientWidth や clientHeight は単純に代入してもだめなので、 Object.defineProerty() で上書きする。

const { JSDOM } = require("jsdom");

const dom = new JSDOM();
const el = dom.window.document.createElement("div");

console.log(el.clientWidth); // => 0

// こうする
Object.defineProperty(el, 'clientWidth', { value: 100 });
console.log(el.clientWidth); // => 100

JSDomはレイアウト計算をサポートしない

とREADMEにあるので、バグじゃないです。

• Unimplemented parts of the web platform

Beyond just features that we haven’t gotten to yet, there are two major features that are currently outside the scope of jsdom. These are:

• Navigation: the ability to change the global object, and all other objects, when clicking a link or assigning location.href or similar.
• Layout: the ability to calculate where elements will be visually laid out as a result of CSS, which impacts methods like getBoundingClientRects() or properties like offsetTop.

その他

ちなみに本物のDOMでも視覚的に配置されるまで、例えば document.body.appendChild(el) とかするまでは値が 0 だったりします。

参考

• jsdom/jsdom: A JavaScript implementation of the WHATWG DOM and HTML standards, for use with node.js
• Object.defineProperty() – JavaScript | MDN
• Stubs – Sinon.JS