Jest で location.href などの値を書き換える方法

プログラミングJavaScript, Node.js2019年4月7日

目的

Node.js におけるテストで Jest を使用する場合、DOM API が関連するテストは JSDOM の実装によって実行されます。 この JSDOM はブラウザーと完全に同じ実装を持っているわけではなく、location.href への代入ができないなどの制約があります。 そのため Jest でもこれに合わせて JSDOM の API を使用したテストコードを記述する必要があります。

準備

Jest では JSDOM の API を直接参照することができないため、jest-environment-jsdom-global をインストールします。

$ npm i jest-environment-jsdom-global jest-environment-jsdom

package.json の jest の項目にも追加しておきます。

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

書き方

あとは location プロパティーなどのように書き換えることができないものを jsdom.reconfigure() を使って書き換えます2。 これは location.href を直接使えるようになるわけではなく、上記パッケージによって jsdom が Jest から参照できるようになるというだけです。

it('detects PC', () => {
  jsdom.reconfigure({
    url: 'https://example.com/',
  });

  expect(location.hostname).toBe('example.com');
});

it('detects SP', () => {
  jsdom.reconfigure({
    url: 'https://sp.example.com/',
  });

  expect(location.hostname).toBe('sp.example.com');
});

パス部分の書き換えだけであれば history.pushState() を使用することでも対処できますが、ホスト名の書き換えなどを伴う場合は jsdom.reconfigure() が必要です。

脚注

  1. Unable to change window.location using Object.defineProperty · Issue #5124 · facebook/jest · GitHub

    ↩

  2. Reconfiguring the jsdom with reconfigure(settings)

    ↩

Node.js の Intl などが CI 上でも動くようにする

プログラミングJavaScript, Node.js2019年3月26日

CI などの環境で Node.js の Intl API をはじめとする国際化サポート1が想定した挙動にならない場合があります。 たとえば Travis CI の Node.js 環境で以下のコマンドを実行すると ja を指定していても en-US 相当の出力になっています。

$ node -p '(new Intl.DateTimeFormat("ja")).format(new Date())'
3/26/2019

Node.js の i18n は ICU を必要としており2、スクリプト実行の前に full-icu をインストールして環境変数に出しておけば正常に動作します。

$ npm i -g full-icu
$ export NODE_ICU_DATA=$(node-full-icu-path)
$ node -p '(new Intl.DateTimeFormat("ja")).format(new Date())'
2019/3/26

Travis CI の場合は .travis.yml の before_install などに指定しておくと期待した出力が得られます3。

環境

Node.js v11.10.0 Travis CI Worker v6.2.0

脚注

  1. Internationalization Support | Node.js v11.12.0 Documentation

    ↩

  2. Problem with Intl API and toLocaleString in NodeJS · Issue #832 · nodejs/help · GitHub

    ↩

  3. Installing Dependencies - Travis CI

    ↩

乗るしかないこのビッグウェーブに〜Gatsby 移行〜

プログラミングJavaScript, Gatsby2019年3月10日

2019/02 まで WordPress で管理していた chitoku.jp ですがこの度 Gatsby に移行しました！

TL;DR

  1. Gatsby で TypeScript なら gatsby-plugin-ts-loader + tsconfig-paths-webpack-plugin
  2. Algolia で日本語の検索をするときは Keep diacritics on characters に注意
  3. babel-plugin-react-intl-auto に出した PR がマージされた5
  4. gatsby-transformer-remark に出した PR がマージされた7
  5. remark-grid-tables に出した PR がマージされた8
  6. Gatsby の IE サポートは半分嘘なので残り半分は自分でやる

Gatsby とは

Gatsby は React 製の静的サイトジェネレーターです。Markdown や画像、YAML、テキストファイルなどを透過的に扱うサーバーをローカルに建てて、それらを React のコンポーネントから GraphQL クエリーを通じて組み込めるという特徴があります。豊富なプラグインによって動作を拡張できるほか、細かいカスタマイズは自分でローカルにプラグインとして切り出して管理することができます。

コアの基本的に見える機能もプラグインとして切り出されており、ビルド時のフックに比較的柔軟に介入できます。たとえば Markdown をソースとすると、gatsby-source-filesystem がファイルを読み込んで gatsby-transformer-remark に処理を委譲し、さらに下位のプラグインが Markdown パーサーの処理をカスタマイズできます。今回は以下のようなプラグインを入れてみました。

続きを読む »

ブラウザー判定スクリプト「SystemInfo」

プログラミングJavaScript2014年10月16日

SystemInfo について

もはやブラウザーを判定する必要がないので更新されていません。

JavaScript で書かれた Web ブラウザーの判定スクリプトです。 最近ではほとんどの環境がレンダリング結果の差異が小さいモダンブラウザーに置き換わりつつあり、ブラウザーを判定する必要は薄れてきていますが、アクセス解析なんかでは未だ使えると思います。

UserAgent 以外にもブラウザーが持つ固有のオブジェクトも含めて判定しているため、いくつかの UserAgent 偽装を検出することができます。 また、PlayStation Portable の独自拡張にも対応しており、UserAgent に含まれていない情報も追加で取得することができます。

続きを読む »