Jestを使用してES6モジュールのインポートをモックするにはどうすればよいですか？

これは不可能だと思い始めていますが、とにかく聞きたいです。

ES6モジュールの1つが特定の方法で別のES6モジュールを呼び出すことをテストしたいと思います。ジャスミンを使えば、これはとても簡単です-

アプリコード：

// myModule.js
import dependency from './dependency';

export default (x) => {
  dependency.doSomething(x * 2);
}

そしてテストコード：

//myModule-test.js
import myModule from '../myModule';
import dependency from '../dependency';

describe('myModule', () => {
  it('calls the dependency with double the input', () => {
    spyOn(dependency, 'doSomething');

    myModule(2);

    expect(dependency.doSomething).toHaveBeenCalledWith(4);
  });
});

Jestと同等のものは何ですか？これはやりたいことのように簡単なことだと思いますが、それを理解しようとして髪を切り裂いてきました。

一番近いのは、importsをrequiresに置き換え、それらをテスト/関数内に移動することです。どちらも私がやりたいことではありません。

// myModule.js
export default (x) => {
  const dependency = require('./dependency'); // yuck
  dependency.doSomething(x * 2);
}

//myModule-test.js
describe('myModule', () => {
  it('calls the dependency with double the input', () => {
    jest.mock('../dependency');

    myModule(2);

    const dependency = require('../dependency'); // also yuck
    expect(dependency.doSomething).toBeCalledWith(4);
  });
});

ボーナスポイントとして、内部の関数dependency.jsがデフォルトのエクスポートである場合は、すべてを機能させたいと思います。ただし、私はデフォルトのエクスポートをスパイすることはJasmineでは機能しないことを知っています（または、少なくともそれを機能させることはできませんでした）。

私はを含むハックを使用してこれを解決することができましたimport *。名前付きのエクスポートとデフォルトのエクスポートの両方で機能します！

名前付きエクスポートの場合：

// dependency.js
export const doSomething = (y) => console.log(y)

// myModule.js
import { doSomething } from './dependency';

export default (x) => {
  doSomething(x * 2);
}

// myModule-test.js
import myModule from '../myModule';
import * as dependency from '../dependency';

describe('myModule', () => {
  it('calls the dependency with double the input', () => {
    dependency.doSomething = jest.fn(); // Mutate the named export

    myModule(2);

    expect(dependency.doSomething).toBeCalledWith(4);
  });
});

またはデフォルトのエクスポートの場合：

// dependency.js
export default (y) => console.log(y)

// myModule.js
import dependency from './dependency'; // Note lack of curlies

export default (x) => {
  dependency(x * 2);
}

// myModule-test.js
import myModule from '../myModule';
import * as dependency from '../dependency';

describe('myModule', () => {
  it('calls the dependency with double the input', () => {
    dependency.default = jest.fn(); // Mutate the default export

    myModule(2);

    expect(dependency.default).toBeCalledWith(4); // Assert against the default
  });
});

Mihai Damianが以下でかなり正しく指摘しているように、これはのモジュールオブジェクトを変更dependencyしているため、他のテストに「リーク」します。したがって、このアプローチを使用する場合は、元の値を保存し、各テストの後に再び設定する必要があります。Jestでこれを簡単に行うには、元の値を簡単に復元できるため、代わりにspyOn（）メソッドを使用してjest.fn()、前述の「リーク」を回避します。

あなたはモジュールをモックして自分でスパイを設定する必要があります：

import myModule from '../myModule';
import dependency from '../dependency';
jest.mock('../dependency', () => ({
  doSomething: jest.fn()
}))

describe('myModule', () => {
  it('calls the dependency with double the input', () => {
    myModule(2);
    expect(dependency.doSomething).toBeCalledWith(4);
  });
});

jestを使用してES6依存モジュールのデフォルトのエクスポートをモックするには：

import myModule from '../myModule';
import dependency from '../dependency';

jest.mock('../dependency');

// If necessary, you can place a mock implementation like this:
dependency.mockImplementation(() => 42);

describe('myModule', () => {
  it('calls the dependency once with double the input', () => {
    myModule(2);

    expect(dependency).toHaveBeenCalledTimes(1);
    expect(dependency).toHaveBeenCalledWith(4);
  });
});

他のオプションは私の場合うまくいきませんでした。

アンドレアスの回答にさらに追加します。ES6コードでも同じ問題がありましたが、インポートを変更したくありませんでした。それはハッキーに見えました。だから私はこれをやった

import myModule from '../myModule';
import dependency from '../dependency';
jest.mock('../dependency');

describe('myModule', () => {
  it('calls the dependency with double the input', () => {
    myModule(2);
  });
});

「dependency.js」と並行して「__mocks__」フォルダにdependency.jsを追加しました。これでうまくいきました。また、これにより、モック実装から適切なデータを返すオプションが与えられました。モックしたいモジュールへの正しいパスを指定してください。

2020年までの早送りで、このリンクが解決策であることがわかりました。ES6モジュール構文のみを使用https://remarkablemark.org/blog/2018/06/28/jest-mock-default-named-export/

// esModule.js
export default 'defaultExport';
export const namedExport = () => {};

// esModule.test.js
jest.mock('./esModule', () => ({
  __esModule: true, // this property makes it work
  default: 'mockedDefaultExport',
  namedExport: jest.fn(),
}));

import defaultExport, { namedExport } from './esModule';
defaultExport; // 'mockedDefaultExport'
namedExport; // mock function

また、知っておく必要があることの1つは、テスト中にjest.mock（）を呼び出せないことです。モジュールのトップレベルで呼び出す必要があります。ただし、テストごとに異なるモックを設定する場合は、個々のテスト内でmockImplementation（）を呼び出すことができます。

質問はすでに回答されていますが、次のように解決できます。

dependency.js

const doSomething = (x) => x
export default doSomething;

myModule.js：

import doSomething from "./dependency";

export default (x) => doSomething(x * 2);

myModule.spec.js：

jest.mock('../dependency');
import doSomething from "../dependency";
import myModule from "../myModule";

describe('myModule', () => {
  it('calls the dependency with double the input', () => {
    doSomething.mockImplementation((x) => x * 10)

    myModule(2);

    expect(doSomething).toHaveBeenCalledWith(4);
    console.log(myModule(2)) // 40
  });
});

私はこれを別の方法で解決しました。あなたがdependency.jsを持っているとしましょう

export const myFunction = () => { }

そのほかに、次の内容でdepdency.mock.jsファイルを作成します。

export const mockFunction = jest.fn();

jest.mock('dependency.js', () => ({ myFunction: mockFunction }));

テストでは、使用する依存関係のあるファイルをインポートする前に：

import { mockFunction } from 'dependency.mock'
import functionThatCallsDep from './tested-code'

it('my test', () => {
    mockFunction.returnValue(false);

    functionThatCallsDep();

    expect(mockFunction).toHaveBeenCalled();

})