Jestで遭遇する謎のエラー「localStorage is not available for opaque origins」を撃退せよ！

2024-06-20

JavaScript、Node.js、NPMにおけるJest SecurityError: localStorage is not available for opaque originsの解決策

JavaScriptのテストフレームワークであるJestで、localStorageにアクセスしようとすると、以下のエラーが発生する場合があります。

Jest SecurityError: localStorage is not available for opaque origins

このエラーは、テストを実行している環境がlocalStorageへのアクセスを許可していない場合に発生します。これは、以下の状況で起こりえます。

Node.js環境: Node.js環境でテストを実行する場合、デフォルトではlocalStorageへのアクセスは許可されていません。
ブラウザ環境: ブラウザ環境でテストを実行する場合、localStorageへのアクセスは、テスト対象のWebサイトがHTTPS接続で実行されている場合にのみ許可されます。

解決策:

このエラーを解決するには、以下の方法があります。

Node.js環境:

Jestの設定ファイルでjest.config.jsを編集: testEnvironmentプロパティを'jsdom'に設定します。

module.exports = {
  testEnvironment: 'jsdom',
};

jsdomモジュールを使用: テストコード内でjsdomモジュールを使用して、localStorageへのアクセスを許可する仮想環境を作成します。

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

const { window } = new JSDOM();
global.window = window;
global.document = window.document;

// テストコードを実行

ブラウザ環境:

テスト対象のWebサイトをHTTPS接続で実行: テスト対象のWebサイトがHTTPS接続で実行されていることを確認します。

補足:

localStorageは、ブラウザがWebサイトのデータを保存するために使用するAPIです。
opaque originsは、HTTPS接続で実行されていないWebサイトを指します。
Jestは、テストを実行する環境に応じて、localStorageへのアクセスを許可したり許可しなかったりする必要があります。

jest.config.jsの編集

module.exports = {
  testEnvironment: 'jsdom',
};

jsdomモジュールの使用

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

const { window } = new JSDOM();
global.window = window;
global.document = window.document;

// テストコードを実行

このコードは、jsdomモジュールを使用して、localStorageへのアクセスを許可する仮想環境を作成します。これにより、テストコード内でlocalStorageを使用できるようになります。

テスト対象のWebサイトがHTTPS接続で実行されていることを確認します。HTTPS接続で実行されていない場合、localStorageへのアクセスは許可されません。

上記のサンプルコードは、あくまでも一例です。状況に応じて、コードを調整する必要があります。

Jest SecurityError: localStorage is not available for opaque origins を解決するその他の方法

jest-environment-jsdom は、Jest で jsdom 環境を簡単に設定できるようにするパッケージです。このパッケージを使用すると、jest.config.js ファイルで testEnvironment プロパティを設定する必要がなくなります。

インストール

npm install --save-dev jest-environment-jsdom

設定

package.json ファイルの jest プロパティに以下を追加します。

"jest": {
  "testEnvironment": "jest-environment-jsdom"
}

global.Storage オブジェクトは、localStorage と sessionStorage へのアクセスを提供します。このオブジェクトを使用すると、jsdom 環境でテストを実行する場合でも、localStorage にアクセスできます。

global.Storage = {
  setItem: (key, value) => {
    // データを保存する処理
  },
  getItem: (key) => {
    // データを取得する処理
  },
  removeItem: (key) => {
    // データを削除する処理
  },
  clear: () => {
    // すべてのデータを削除する処理
  },
  length: 0,
};

// テストコードを実行

mock オブジェクトを使用して、localStorage の動作をシミュレートできます。これにより、実際の localStorage にアクセスしなくても、テストを実行できます。

const mockLocalStorage = {
  setItem: jest.fn(),
  getItem: jest.fn(),
  removeItem: jest.fn(),
  clear: jest.fn(),
  length: 0,
};

global.localStorage = mockLocalStorage;

// テストコードを実行

注意事項