Jestを使ってwindow.locationやwindow.navigatorなどのwindow直下の変数（グローバル変数）にアクセスする関数のテストをする 💯

locationのテストの例

JavaScript

const isProduction = () => {
  return location.hostname === 'kimizuka.fm';
};

export default isProduction;

URLをみて、本番環境か否かを判定するプログラム。
Jestを使ってテストを書くのに困った。

Jest

import isProduction from '~/assets/js/isProduction';

describe('isProduction', () => {
  test('false', () => {
    expect(isProduction()).toBe(false);
  });

  test('true', () => {
    global.window = Object.create(window);
    Object.defineProperty(window, 'location', {
      value: {
        hostname: 'emarf.co'
      }
    });

    expect(isProduction()).toBe(true);
  });
});

こんな感じでwindowを拡張してテストを通した。

が。

そもそも、URLを引数で受け取って本番か否かを判定するようにしておけば、何も問題なかった。

変数を受け取る例

const isProduction = (hostname) => {
  return hostname === 'kimizuka.fm';
};

export default isProduction;

という感じで実装し、

import isProduction from '~/assets/js/isProduction';

console.log(isProduction(location.hostname));

と使う設計にすれば、テストは単純に、

import isProduction from '~/assets/js/isProduction';

describe('isProduction', () => {
  test('false', () => {
    expect(isProduction('hogehoge')).toBe(false);
  });

  test('true', () => {
    expect(isProduction('kimizuka.fm')).toBe(true);
  });
});

という感じで書ける。次回からこうしようと思う。

navigatorのテストの例

JavaScript

const isSp = () => {
  return /iphone|ipod|ipad|android/.test(navigator.userAgent.toLowerCase());
};

export default isSp;

usrAgentをみて、スマートフォンか否かを判定するプログラム。
Jestを使ってテストを書くのに困った。

Jest

import isSp from '~/assets/js/isSp';

describe('isSp', () => {
  test('false', () => {
    expect(isSp()).toBe(false);
  });

  test('true', () => {
    global.window = Object.create(window);
    Object.defineProperty(window, 'navigator', {
      value: {
        userAgent: 'iPhone'
      }
    });

    expect(isSp()).toBe(true);
  });
});

こんな感じでwindowを拡張してテストを通した。

が。

そもそも、usrAgentを引数で受け取って本番か否かを判定するようにしておけば、何も問題なかった。

変数を受け取る例

const isSp = (userAgent) => {
  return /iphone|ipod|ipad|android/.test(userAgent.toLowerCase());
};

export default isSp;

という感じで実装し、

import isSp from '~/assets/js/isSp';

console.log(isSp(navigator.userAgent));

と使う設計にすれば、テストは単純に、

import isSp from '~/assets/js/isSp';

describe('isSp', () => {
  test('false', () => {
    expect(isSp('hogehoge')).toBe(false);
  });

  test('true', () => {
    expect(isSp('iPhone')).toBe(true);
  });
});

という感じで書ける。次回からこうしようと思う。