Jest チートシート – JavaScriptでテストを書こう｜ProgLearn｜エンジニアのためのプログラミング情報メディア

こんにちは。どんぶラッコです。

今回は、JavaScriptのテストフレームワーク、JESTのチートシートをまとめてみました！

皆さんもぜひ活用してください♪

https://jestjs.io/docs/en/getting-started.html

基本形
基本
Truthiness
数字の比較
小数点の場合
非同期処理の場合
テストの前後に処理してほしいことがある場合
Describe
順番

基本形

こんなモジュールを作ったら

function sum(a, b) {
  return a + b;
}
module.exports = sum;

こんなテストを書く

sum.test.jsという名前にする

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

基本

// 数字の場合は toBe
test('two plus two is four', () => {
  expect(2 + 2).toBe(4);
});

// オブジェクトの場合は toEqual
test('object assignment', () => {
  const data = {one: 1};
  data['two'] = 2;
  expect(data).toEqual({one: 1, two: 2});
});

// 否定形の場合も使えるよ
test('adding positive numbers is not zero', () => {
  for (let a = 1; a < 10; a++) {
    for (let b = 1; b < 10; b++) {
      expect(a + b).not.toBe(0);
    }
  }
});

// 文字なら toMatch
test('there is no I in team', () => {
  expect('team').not.toMatch(/I/);
});

test('but there is a "stop" in Christoph', () => {
  expect('Christoph').toMatch(/stop/);
});

// 配列なら toContain
const shoppingList = [
  'diapers',
  'kleenex',
  'trash bags',
  'paper towels',
  'beer',
];

test('the shopping list has beer on it', () => {
  expect(shoppingList).toContain('beer');
  expect(new Set(shoppingList)).toContain('beer');
});

// 例外処理の場合
function compileAndroidCode() {
  throw new ConfigError('you are using the wrong JDK');
}

test('compiling android goes as expected', () => {
  expect(compileAndroidCode).toThrow();
  expect(compileAndroidCode).toThrow(ConfigError);

  // You can also use the exact error message or a regexp
  expect(compileAndroidCode).toThrow('you are using the wrong JDK');
  expect(compileAndroidCode).toThrow(/JDK/);
});

Truthiness

toBeNull … nullの時だけマッチ
toBeUndefined… undefindedの時だけマッチ。反対語は toBeDefined
toBeTruthy … if構文の時に true だった場合
toBeFalsy … if構文の時に false だった場合 test(‘null’, () => { const n = null; expect(n).toBeNull(); expect(n).toBeDefined(); expect(n).not.toBeUndefined(); expect(n).not.toBeTruthy(); expect(n).toBeFalsy(); }); test(‘zero’, () => { const z = 0; expect(z).not.toBeNull(); expect(z).toBeDefined(); expect(z).not.toBeUndefined(); expect(z).not.toBeTruthy(); expect(z).toBeFalsy(); });

数字の比較

test('two plus two', () => {
  const value = 2 + 2;
  expect(value).toBeGreaterThan(3);
  expect(value).toBeGreaterThanOrEqual(3.5);
  expect(value).toBeLessThan(5);
  expect(value).toBeLessThanOrEqual(4.5);

  // toBe and toEqual are equivalent for numbers
  expect(value).toBe(4);
  expect(value).toEqual(4);
});

小数点の場合

test('adding floating point numbers', () => {
  const value = 0.1 + 0.2;
  //expect(value).toBe(0.3);           丸め誤差でエラーになる
  expect(value).toBeCloseTo(0.3); // これなら動く
});

非同期処理の場合

test('the data is peanut butter', done => { // 引数に done を指定すると
  function callback(data) {
    expect(data).toBe('peanut butter');
    done(); // done() が発火するまで待ってくれる
  }

  fetchData(callback);
});

// Promise型が返ってくる場合はそれが返ってくるまで待ってくれる
test('the data is peanut butter', () => {
  return fetchData().then(data => { // return しないと待ってくれない！

    expect(data).toBe('peanut butter');
  });
});

// エラー処理もテストする場合
test('the fetch fails with an error', () => {
  expect.assertions(1);
  return fetchData().catch(e => expect(e).toMatch('error'));
});

// resolveを待ってね！という指定の仕方もできる
test('the data is peanut butter', () => {
  return expect(fetchData()).resolves.toBe('peanut butter');
});

// rejectもあるよ
test('the fetch fails with an error', () => {
  return expect(fetchData()).rejects.toMatch('error');
});

// async/await で書けるよ
test('the data is peanut butter', async () => {
  const data = await fetchData();
  expect(data).toBe('peanut butter');
});

test('the fetch fails with an error', async () => {
  expect.assertions(1);
  try {
    await fetchData();
  } catch (e) {
    expect(e).toMatch('error');
  }
});

// async/await と resolve/reject を組み合わせることができるよ
test('the data is peanut butter', async () => {
  await expect(fetchData()).resolves.toBe('peanut butter');
});

test('the fetch fails with an error', async () => {
  await expect(fetchData()).rejects.toThrow('error');
});

テストの前後に処理してほしいことがある場合

// 各テスト毎に実施してほしい処理
beforeEach(() => {
  initializeCityDatabase();
});

afterEach(() => {
  clearCityDatabase();
});

// 非同期処理でも Promiseが返ってくるならこれでいける
beforeEach(() => {
  return initializeCityDatabase();
});

// 最初と最後1回だけ走らせてほしい処理
beforeAll(() => {
  return initializeCityDatabase();
});

afterAll(() => {
  return clearCityDatabase();
});

Describe

を使うとグループ化できる

// Applies to all tests in this file
beforeEach(() => {
  return initializeCityDatabase();
});

test('city database has Vienna', () => {
  expect(isCity('Vienna')).toBeTruthy();
});

test('city database has San Juan', () => {
  expect(isCity('San Juan')).toBeTruthy();
});

describe('matching cities to foods', () => {
  // Applies only to tests in this describe block
  beforeEach(() => {
    return initializeFoodDatabase();
  });

  test('Vienna <3 sausage', () => {
    expect(isValidCityFoodPair('Vienna', 'Wiener Schnitzel')).toBe(true);
  });

  test('San Juan <3 plantains', () => {
    expect(isValidCityFoodPair('San Juan', 'Mofongo')).toBe(true);
  });
});

この場合、一番外側にある beforeEach は describe 内のコードでも走る

順番

desctibe が一通り実行された後に test が実行される

onlyをつけるとそのtestコードだけが実行される

test.only('this will be the only test that runs', () => {
  expect(true).toBe(false);
});

test('this test will not run', () => {
  expect('A').toBe('A');
});