ฉันจะจำลองการนำเข้าโมดูล ES6 โดยใช้ Jest ได้อย่างไร

ฉันเริ่มคิดว่ามันเป็นไปไม่ได้ แต่ฉันต้องการถามต่อไป

ฉันต้องการทดสอบว่าหนึ่งในโมดูล ES6 ของฉันเรียกโมดูล 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เป็นการส่งออกเริ่มต้น อย่างไรก็ตามฉันรู้ว่าการสอดแนมในการส่งออกเริ่มต้นไม่ได้ทำงานในจัสมิน (หรืออย่างน้อยฉันก็ไม่สามารถทำงานได้) ดังนั้นฉันจึงไม่ได้หวังว่ามันจะเป็นไปได้ในเจสต์เช่นกัน

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()เพราะมันรองรับการเรียกคืนค่าดั้งเดิมของมันได้อย่างง่ายดายดังนั้นจึงควรหลีกเลี่ยง 'leaking' ก่อนที่จะกล่าวถึง

คุณต้องจำลองโมดูลและตั้งสายลับด้วยตัวเอง:

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);
  });
});

หากต้องการเยาะเย้ยการเอ็กซ์พอร์ตโมดูลโมดูลพึ่งพา ES6 โดยใช้ jest:

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);
  });
});

ตัวเลือกอื่น ๆ ใช้ไม่ได้กับกรณีของฉัน

กำลังเพิ่มคำตอบ Andreas เพิ่มเติม ฉันมีปัญหาเดียวกันกับรหัส 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

อีกสิ่งหนึ่งที่คุณต้องรู้ (ซึ่งใช้เวลาซักพักหนึ่ง) คือคุณไม่สามารถโทร jest.mock () ภายในการทดสอบ คุณต้องเรียกว่าระดับสูงสุดของโมดูล อย่างไรก็ตามคุณสามารถเรียก mockImplementation () ภายในการทดสอบแต่ละรายการหากคุณต้องการตั้งค่า mocks ที่แตกต่างกันสำหรับการทดสอบที่แตกต่างกัน

คำถามได้รับคำตอบแล้ว แต่คุณสามารถแก้ไขได้ดังนี้:

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
  });
});

ฉันแก้ไขมันด้วยวิธีอื่น สมมติว่าคุณมีการพึ่งพาของคุณ

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();

})