Как издеваться над navigator.clipboard.writeText () в Jest?

Question

Я попробовал следующие 4 варианта после просмотра проблем Jest и ответов SO, но я получаю либо ошибки TypeScript, либо ошибки времени выполнения. Я бы очень хотел, чтобы вариант 1 (spyOn) работал.

// ------ option 1 -----
// Gives this runtime error: "Cannot spyOn on a primitive value; undefined given"
const writeText = jest.spyOn(navigator.clipboard, 'writeText');

// ------ option 2 -----
Object.defineProperty(navigator, 'clipboard', {
    writeText: jest.fn(),
});

// ------ option 3 -----
// This is from SO answer but gives a TypeScript error
window.__defineGetter__('navigator', function() {
    return {
        clipboard: {
            writeText: jest.fn(x => x)
        }
    }
})

// ------ option 4 -----
const mockClipboard = {
    writeText: jest.fn()
};
global.navigator.clipboard = mockClipboard;

Answer 1

Jest-тесты выполняются в среде JSdom, и не все свойства определены, поэтому вам следует определить функцию, прежде чем шпионить за ней.

Вот пример:

Object.assign(navigator, {
  clipboard: {
    writeText: () => {},
  },
});

describe("Clipboard", () => {
  describe("writeText", () => {
    jest.spyOn(navigator.clipboard, "writeText");
    beforeAll(() => {
      yourImplementationThatWouldInvokeClipboardWriteText();
    });
    it("should call clipboard.writeText", () => {
      expect(navigator.clipboard.writeText).toHaveBeenCalledWith("zxc");
    });
  });
});

Изменить: вы также можете использоватьObject.defineProperty, но он принимает объект дескрипторов как третий параметр

Object.defineProperty(navigator, "clipboard", {
  value: {
    writeText: () => {},
  },
});

Answer 2

В случае, если вы используетеreact-testing-library:

Сначала установите@testing-library/user-event

Во-вторых, импортируйте пользовательское событие следующим образом:import userEvent from '@testing-library/user-event';

Тогда, например:

      test('copies all codes to clipboard when clicked', async () => {
    const user = userEvent.setup()
    render(<Success />);
    const copyButton = screen.getByTestId('test-copy-button');
    await user.click(copyButton);
    const clipboardText = await navigator.clipboard.readText();
    expect(clipboardText).toBe('bla bla bla');
})

Answer 3

Я расширил предыдущие решения, а также добавил функциональность фиктивного буфера обмена для readText чтобы можно было проверить содержимое буфера обмена.

Вот полное содержание моих test.js файл

      import copyStringToClipboard from 'functions/copy-string-to-clipboard.js';

// ------- Mock -------
//Solution for mocking clipboard so it can be tested credit: <link to this post>
const originalClipboard = { ...global.navigator.clipboard };

beforeEach(() => {
    let clipboardData = '' //initalizing clipboard data so it can be used in testing
    const mockClipboard = {
        writeText: jest.fn(
            (data) => {clipboardData = data}
        ),
        readText: jest.fn(
            () => {return clipboardData}  
        ),
    };
    global.navigator.clipboard = mockClipboard;

});

afterEach(() => {
    jest.resetAllMocks();
    global.navigator.clipboard = originalClipboard;
});
// --------------------


it("copies a string to the clipboard", async () => {
    
    //arrange
    const string = 'test 😃'
  
    //act
    copyStringToClipboard(string)

    //assert
    expect(navigator.clipboard.readText()).toBe(string)
    expect(navigator.clipboard.writeText).toBeCalledTimes(1);
    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(string);
});

Answer 4

В моей среде testing-library svelte и jest jsdom мне не удалось издеваться над global.navigator. Решение, которое сработало, издевалось над window.navigatorв моем тесте.

      describe('my-test', () => {

  it("should copy to clipboard", () => {
    const { getByRole } = render(MyComponent);

    Object.assign(window.navigator, {
      clipboard: {
        writeText: jest.fn().mockImplementation(() => Promise.resolve()),
      },
    });

    const button = getByRole("button");
    fireEvent.click(button);

    expect(window.navigator.clipboard.writeText)
      .toHaveBeenCalledWith('the text that needs to be copied');
  });

});

Answer 5

Я столкнулся с аналогичной ситуацией и использовал следующий метод для имитации буфера обмена в объекте навигатора:

        const originalClipboard = { ...global.navigator.clipboard };
  const mockData = {
     "name": "Test Name",
     "otherKey": "otherValue"
  }

  beforeEach(() => {
    const mockClipboard = {
      writeText: jest.fn(),
    };
    global.navigator.clipboard = mockClipboard;

  });

  afterEach(() => {
    jest.resetAllMocks();
    global.navigator.clipboard = originalClipboard;
  });

  test("copies data to the clipboard", () => {
    copyData(); //my method in the source code which uses the clipboard
    expect(navigator.clipboard.writeText).toBeCalledTimes(1);
    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
      JSON.stringify(mockData)
    );
  });