Mocking the navigator object

Question

In my app I use the navigator object to store a string in the clipboard:

navigator.clipboard.writeText('string')

But when I write my test in Jest and mock this object I get the error:

Cannot read property 'writeText' of undefined

This is how I mock navigator in my test file:

//  Mock clipboard object
const clipboardWriteTextSpy = jest.fn()
navigator = {
  clipboard: {
    writeText: clipboardWriteTextSpy
  }
}

Update

I also tried using global.navigator but I still have the error:

global.navigator = {
  clipboard: {
    writeText: clipboardWriteTextSpy
  }
}

Has someone an idea how to mock this object?

Does this answer your question? [Mocking globals in Jest](https://stackoverflow.com/questions/40449434/mocking-globals-in-jest) — Dimitri L., Aug 09 '20 at 17:44

score 1 · Answer 1 · answered Aug 09 '20 at 17:35

1

The easiest way to mock non-application logic (like browser's navigator) is to write a function as part of your application and mock it. Example:

// clipboard.js

export const setClipboard = (text) => navigator.clipboard.writeText('string');

Then mock it in your test:

// some.test.js

import { setClipboard } from './clipboard';

jest.mock('./clipboard');

answered Aug 09 '20 at 17:35

Dimitri L.

Yes would be great but I need for that to change the source code. – johannchopin Aug 09 '20 at 17:42
Then refer to this solution: https://stackoverflow.com/questions/40449434/mocking-globals-in-jest – Dimitri L. Aug 09 '20 at 17:43

1 Answers1