Mock 'useTheme()' function in custom plugin

1

I created custom plugin and i used ‘useTheme()’ function to build plugin content and custom editors using Grafana theme style.

There is any way to mock this call (‘useTheme()’) ?
I got the error below when i try to execute unit tests.

[INFO] TypeError: Cannot assign to read only property ‘constructor’ of object ‘#<Group>’
[INFO] > 4 | import { useTheme } from ‘@grafana/ui’;
[INFO] | ^

2

So just to make sure I understand - you want to mock useTheme that you import from @grafana/ui in your tests, right?

In that case, you can use jest.mock() function.
Here is the example mocking getBackendSrv function from @grafana/runtime:

So in your case you want to mock just useTheme, you can do something like this and add everything you need in useTheme:

jest.mock('@grafana/ui', () => {
  const original = jest.requireActual('@grafana/ui');

  return {
    ...original,
    useTheme: () => {
      return {
        name: 'Grafana Dark'
      };
    },
  };
});
3

I’m trying to create unit test for my custom plugin and i got the ‘cannot assign …’ error.
I tried your solution but it is not working (see screenshot below), i’m still getting the same error.
Maybe it is not related to mocking ?!

Screen Shot 2020-10-26 at 12.22.27
Screen Shot 2020-10-26 at 12.22.27676×593 41.1 KB

4

Just to confirm, are you using useTheme in functional component?

5

Yes,

For now, the code below working for me:

Screen Shot 2020-10-26 at 14.15.49

1 Like
6

Awesome! :rocket:I am glad it works.