猫型iPS細胞研究所

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== Jest ======

ExpoでJestを使うには、<html>jest-expo</html>と<html>jest</html>の両方が必要。

[[https://github.com/expo/expo/tree/master/packages/jest-expo|jest-expo]]

===== インストール =====
<code>
npm i jest-expo --save-dev
npm i jest
</code>

===== package.json =====
<code>
//package.jsonに追加
"scripts": {
  "test": "node_modules/.bin/jest"
},
"jest": {
  "preset": "jest-expo",
  "testEnvironment": "node" //必須ではない。jsdomを無効にしてテストを早くする
}
</code>
<code>
npm test 
npm test -- --watch  // ウォッチモードの場合
</code>

===== テスト =====
src/__tests__ フォルダの中にテストコードを配置する（ファイル名は何でもよい）
ファイル名の末尾を .test.js にする（ src 内ならどこに置いてもよい）

==== エラー ====
<code>
Error: Cannot find module '[...pass...]\node_modules\jest\bin\jest.js'
</code>
jestがインストールされていない。
<code>
npm install jest
</code>

===== 使い方 =====

[[https://medium.com/@rickhanlonii/understanding-jest-mocks-f0046c68e53c|Understanding Jest Mocks]]

<code javascript /src/math.js>
export const add      = (a, b) => a + b;
export const subtract = (a, b) => b - a;
export const multiply = (a, b) => a * b;
export const divide   = (a, b) => b / a;
</code>

<code javascript App.js>
import * as math from './src/math'

export const doAdd      = (a, b) => math.add(a, b);
export const doSubtract = (a, b) => math.subtract(a, b);
export const doMultiply = (a, b) => math.multiply(a, b);
export const doDivide   = (a, b) => math.divide(a, b);
</code>

==== 呼び出しの追跡 ====

<code javascript App.test.js>
import * as app from "./App"
import * as math from "./src/math"

describe(" Mock Function provides 3 features",()=>{
    test("1.Capture calls 呼び出しを追跡する",()=>{
        const mock = jest.fn()
        let result = mock("foo")

        expect(result).toBeUndefined()
        expect(mock).toHaveBeenCalled()
        expect(mock).toHaveBeenCalledTimes(1)
        expect(mock).toHaveBeenCalledWith("foo")
    })
})
</code>

==== 戻り値の設定 ====

<code javascript App.test.js>
import * as app from "./App"
import * as math from "./src/math"

describe(" Mock Function provides 3 features",()=>{
    test("2-1.Set return values 戻値をセットする fn()",()=>{
        const mock = jest.fn(() => "bar")

        expect(mock("foo")).toBe("bar")
        expect(mock).toHaveBeenCalledWith("foo")
    })
})
</code>

==== 実装の変更 ====

<code javascript App.test.js>
import * as app from "./App"
import * as math from "./src/math"

describe(" Mock Function provides 3 features",()=>{
    test("3-1.Change the implementation 実装を変更する mockImplementation()",()=>{
        const mock = jest.fn().mockImplementation(() => "bar")

        expect(mock("foo")).toBe("bar")
        expect(mock).toHaveBeenCalledWith("foo")
    })

    test("3-2.Change the implementation 実装を変更する１回",()=>{
        const mock = jest.fn().mockImplementationOnce(() => "bar")

        expect(mock("foo")).toBe("bar")
        expect(mock).toHaveBeenCalledWith("foo")
      
        expect(mock("baz")).toBe(undefined)
        expect(mock).toHaveBeenCalledWith("baz")
    })

    test("3-3.Change the implementation 実装を変更する promise",()=>{
        const mock = jest.fn()
        mock.mockResolvedValue("bar")
      
        expect(mock("foo")).resolves.toBe("bar")
        expect(mock).toHaveBeenCalledWith("foo")
    })
})
</code>

==== 関数のモック ====
<code javascript App.test.js>
import * as app from "./App"
import * as math from "./src/math"

describe("モジュールと関数をモックする",()=>{
    test("1.関数をモックする", () => {
        math.add = jest.fn()

        app.doAdd(1, 2)
        expect(math.add).toHaveBeenCalledWith(1, 2)
      });
})
</code>

==== モジュールのモック（jset.mock()） ====
<code javascript App.test.js>
import * as app from "./App"
import * as math from "./src/math"

//import と同じ階層で書く必要があるようだ。
//importもかかないとmahtが使えない。
//importした関数全てに math.xxx = jest.fn()している。
jest.mock("./src/math")

describe("モジュールと関数をモックする",()=>{
      test("2.モジュールをモックする", () => {
        app.doAdd(1, 2)
        expect(math.add).toHaveBeenCalledWith(1, 2);

        app.doSubtract(1, 2);
        expect(math.subtract).toHaveBeenCalledWith(1, 2);
      });
})
</code>

==== スパイ ====

<code javascript App.test.js>
describe("スパイ",()=>{

    test("1.関数をスパイする", () => {
        const addMock = jest.spyOn(math, "add");

        //実装は変わらない
        expect(app.doAdd(1, 2)).toEqual(3);
      
        //しかし追跡できる
        expect(addMock).toHaveBeenCalledWith(1, 2);
      });

      test("２.スパイしている関数の実装を変更して戻す", () => {
        const addMock = jest.spyOn(math, "add");
      
        // 実装を変更する
        addMock.mockImplementation(() => "mock");
        expect(app.doAdd(1, 2)).toEqual("mock");
      
        // 元に戻す
        addMock.mockRestore();
        expect(app.doAdd(1, 2)).toEqual(3);
      });
})
</code>

==== スパイは基本のfn()の組み合わせ ====
<code javascript App.test.js>
describe("スパイ",()=>{
test("スパイは基本のfn()の組み合わせ", () => {

    // オリジナル実装をバックアップ
    const originalAdd = math.add;
  
    // オリジナル実装でモックする
    math.add = jest.fn(originalAdd);
  
    // オリジナル実装のスパイができるようになる
    expect(app.doAdd(1, 2)).toEqual(3);
    expect(math.add).toHaveBeenCalledWith(1, 2);
  
    // 実装を変更する
    math.add.mockImplementation(() => "mock");
    expect(app.doAdd(1, 2)).toEqual("mock");
    expect(math.add).toHaveBeenCalledWith(1, 2);
  
    // オリジナル実装に戻す
    math.add = originalAdd;
    expect(app.doAdd(1, 2)).toEqual(3);
  })
})  
</code>
猫型iPS細胞研究所

ユーザ用ツール

サイト用ツール

ページ用ツール
