জাস্ট ব্যবহার করে জাভাস্ক্রিপ্ট উইন্ডো অবজেক্টটিকে কীভাবে উপহাস করবেন?

Question

আমার একটি ফাংশন পরীক্ষা করা দরকার যা ব্রাউজারে একটি নতুন ট্যাব খোলে

openStatementsReport(contactIds) {
  window.open(`a_url_${contactIds}`);
}

আমি উইন্ডোটির openফাংশনটিকে উপহাস করতে চাই যাতে আমি যাচাই করতে পারি যে সঠিক ইউআরএলটি openফাংশনে প্রবেশ করেছে।

জাস্ট ব্যবহার করে, আমি কীভাবে উপহাস করব জানি না window। আমি window.openএকটি মক ফাংশন দিয়ে সেট করার চেষ্টা করেছি কিন্তু এইভাবে কাজ করে না। নীচে পরীক্ষার কেস দেওয়া আছে

it('correct url is called', () => {
  window.open = jest.fn();
  statementService.openStatementsReport(111);
  expect(window.open).toBeCalled();
});

তবে এটি আমাকে ত্রুটি দেয়

expect(jest.fn())[.not].toBeCalled()

jest.fn() value must be a mock function or spy.
    Received:
      function: [Function anonymous]

পরীক্ষার ক্ষেত্রে আমার কী করা উচিত? কোন পরামর্শ বা ইঙ্গিত প্রশংসা করা হয়।

Answer 1

পরিবর্তে windowব্যবহারglobal

it('correct url is called', () => {
  global.open = jest.fn();
  statementService.openStatementsReport(111);
  expect(global.open).toBeCalled();
});

আপনি চেষ্টা করতে পারেন

const open = jest.fn()
Object.defineProperty(window, 'open', open);

Comments

এটি চেষ্টা করেও আমার পক্ষে কাজ করছে না। আমার কেস অদ্ভুত, বিদ্রূপ স্থানীয়ভাবে কাজ করে তবে ট্র্যাভিসে পিআর মার্জের জন্য নয় ... কোনও ধারণা?

— অ্যালেক্স জেএম

@ অ্যালেক্সজেএম আপনার কি একই সমস্যা আছে? আপনি কিভাবে উইন্ডো অবজেক্ট উপহাস করবেন শেয়ার করতে মন?

— ড্যানি

আমি কেবল আমার পরীক্ষাগুলিতে উইন্ডো.প্রোপার্টি সংজ্ঞায়িত করেছি

— মারাকুজা-রস

@ আন্দ্রিয়াস সেখানে অনির্ধারিত যেমন জানালা উপহাস কোন উপায় আছে কি stackoverflow.com/questions/59173156/...

— দিলীপ THOMAS

ধন্যবাদ! ঘন্টা পরে, আমি শুধু পরিবর্তন করা প্রয়োজন windowজন্যglobal

— SrAxi

Answer 2

আমার জন্য কাজ করা একটি পদ্ধতি নিম্নলিখিত ছিল। এই পদ্ধতির সাহায্যে আমাকে এমন কিছু কোড পরীক্ষা করার অনুমতি দিয়েছে যা ব্রাউজারে এবং নোডে উভয়ই কাজ করা উচিত, যেহেতু এটি আমাকে সেট windowকরার অনুমতি দিয়েছে undefined।

এটি ছিল জেস্ট 24.8 এর সাথে (আমি বিশ্বাস করি):

let windowSpy;

beforeEach(() => {
  windowSpy = jest.spyOn(window, "window", "get");
});

afterEach(() => {
  windowSpy.mockRestore();
});

it('should return https://example.com', () => {
  windowSpy.mockImplementation(() => ({
    location: {
      origin: "https://example.com"
    }
  }));

  expect(window.location.origin).toEqual("https://example.com");
});

it('should be undefined.', () => {
  windowSpy.mockImplementation(() => undefined);

  expect(window).toBeUndefined();
});

Comments

এটি Object.definePropertyমশকরা যখন অন্যান্য পরীক্ষার উপর প্রভাব ফেলতে দেয় না তার থেকে এটি আরও ভাল ।

— সের্গেই

Answer 3

আমরা ব্যবহার করে এটি বর্ণনা করতে পারেন globalমধ্যেsetupTests

// setupTests.js
global.open = jest.fn()

এবং globalপ্রকৃত পরীক্ষায় এটি কল করুন :

// yourtest.test.js
it('correct url is called', () => {
    statementService.openStatementsReport(111);
    expect(global.open).toBeCalled();
});

Answer 4

জেস্টে গ্লোবালগুলি উপহাস করার কয়েকটি উপায় রয়েছে:

1. mockImplementationপদ্ধতির ব্যবহার করুন (বেশিরভাগ উপাখ্যানের মতো), তবে এটি কেবলমাত্র সেই চলকগুলির জন্যই কাজ করবে যার কয়েকটি ডিফল্ট বাস্তবায়ন সরবরাহ করেছে jsdom, এর window.openমধ্যে একটি:

test('it works', () => {
  // setup
  const mockedOpen = jest.fn();
  // without making a copy you will have a circular dependency problem
  const originalWindow = { ...window };
  const windowSpy = jest.spyOn(global, "window", "get");
  windowSpy.mockImplementation(() => ({
    ...originalWindow, // in case you need other window properties to be in place
    open: mockedOpen
  }));

  // tests
  statementService.openStatementsReport(111)
  expect(mockedOpen).toBeCalled();

  // cleanup
  windowSpy.mockRestore();
});

2. সরাসরি বিশ্বব্যাপী সম্পত্তিতে সরাসরি বরাদ্দ করুন তবে কিছু windowভেরিয়েবলের জন্য ত্রুটি বার্তাগুলি ট্রিগার করতে পারে যেমন window.href।

test('it works', () => {
  // setup
  const mockedOpen = jest.fn();
  const originalOpen = window.open;
  window.open = mockedOpen;

  // tests
  statementService.openStatementsReport(111)
  expect(mockedOpen).toBeCalled();

  // cleanup
  window.open = originalOpen;
});

3. গ্লোবালগুলি সরাসরি ব্যবহার করবেন না (কিছুটা রিফ্যাক্টরিং প্রয়োজন)

সরাসরি বিশ্বব্যাপী মানটি ব্যবহার করার পরিবর্তে এটি অন্য ফাইল থেকে আমদানি করা আরও পরিষ্কার হতে পারে, তাই মশকরা জাস্টের সাথে তুচ্ছ হয়ে উঠবে।

./test.js

jest.mock('./fileWithGlobalValueExported.js');
import { windowOpen } from './fileWithGlobalValueExported.js';
import { statementService } from './testedFile.js';

// tests
test('it works', () => {
  statementService.openStatementsReport(111)
  expect(windowOpen).toBeCalled();
});

./fileWithGlobalValueExporter.js

export const windowOpen = window.open;

./testedFile.js

import { windowOpen } from './fileWithGlobalValueExported.js';
export const statementService = {
  openStatementsReport(contactIds) {
    windowOpen(`a_url_${contactIds}`);
  }
}

Answer 5

আপনি এটি চেষ্টা করতে পারেন:

import * as _Window from "jsdom/lib/jsdom/browser/Window";

window.open = jest.fn().mockImplementationOnce(() => {
    return new _Window({ parsingMode: "html" });
});

it("correct url is called", () => {
    statementService.openStatementsReport(111);
    expect(window.open).toHaveBeenCalled();
});

Answer 6

আমি এটি করার একটি সহজ উপায় খুঁজে পেয়েছি: মুছুন এবং প্রতিস্থাপন করুন

describe('Test case', () => {
  const { open } = window;

  beforeAll(() => {
    // Delete the existing
    delete window.open;
    // Replace with the custom value
    window.open = jest.fn();
    // Works for `location` too, eg:
    // window.location = { origin: 'http://localhost:3100' };
  });

  afterAll(() => {
    // Restore original
    window.open = open;
  });

  it('correct url is called', () => {
    statementService.openStatementsReport(111);
    expect(window.open).toBeCalled(); // Happy happy, joy joy
  });
});

Answer 7

যদি এটি https://github.com/facebook/jest/issues/890 এ উইন্ডো অবস্থানের সমস্যার মতো হয় তবে আপনি চেষ্টা করতে পারেন [সামঞ্জস্য]

delete global.window.open;
global.window = Object.create(window);
global.window.open = jest.fn();

Answer 8

আমার উপাদানগুলিতে আমার অ্যাক্সেস দরকার window.location.search, এটি আমি ঠাট্টা পরীক্ষায় করেছি:

Object.defineProperty(global, "window", {
  value: {
    location: {
      search: "test"
    }
  }
});

উইন্ডো বৈশিষ্ট্যগুলি অবশ্যই বিভিন্ন পরীক্ষায় আলাদা হতে হবে আমরা একটি ফাংশনে উইন্ডো মকিং রাখতে পারি এবং বিভিন্ন পরীক্ষার জন্য ওভাররাইড করার জন্য এটি লিখনযোগ্য করে তুলতে পারি:

function mockWindow(search, pathname) {
  Object.defineProperty(global, "window", {
    value: {
      location: {
        search,
        pathname
      }
    },
    writable: true
  });
}

এবং প্রতিটি পরীক্ষার পরে পুনরায় সেট করুন

afterEach(() => {
  delete global.window.location;
});

Answer 9

আমি সরাসরি অর্পণ jest.fn()করছি window.open।

window.open = jest.fn()
// ...code
expect(window.open).toHaveBeenCalledTimes(1)
expect(window.open).toHaveBeenCalledWith('/new-tab','__blank')

Answer 10

আপনার ঠাট্টা কনফিগারেশনে setupFilesAfterEnv যোগ করুন: ["./setupTests.js"], সেই ফাইলটি তৈরি করুন এবং পরীক্ষাগুলির আগে আপনি যে কোডটি চালাতে চান সেটি যুক্ত করুন

//setupTests.js
window.crypto = {
   .....
};

রেফ: https://jestjs.io/docs/en/configration#setupfilesafterenv-array