Write unit tests for custom plugins

We have developed a custom plugin and placed it in the data/plugins folder. Now we want to write unit tests for the same. Can someone tell us how we should go about writing these tests?

What language are you using in your plugin?

You can use any test framework you want - a plugin is basically just JavaScript. We use mocha and karma in our plugins right now but I will be migrating them to use jest instead in the future. The pain of getting karma to work was not worth the benefit (cross browser unit testing).

Our plugin is written using angularjs. We are unable to test the module.js file using karma. We are having issues injecting the controller in the unit tests. Our controller extends PanelCtrl. Do you have any example where you or anyone else has tried to write such unit tests for a plugin?

Most new plugins I’ve been working on are in TypeScript. Worldmap is written in JavaScript with some Karma tests - not sure I’d recommend it as the way to write tests. I would probably write them differently if I started again.

Worldmap: https://github.com/grafana/worldmap-panel/tree/master/test

The Hawkular DS: https://github.com/hawkular/hawkular-grafana-datasource

Alarm Box: https://github.com/BT-OpenSource/bt-grafana-alarm-box

TypeScript with Karma:

I think there are more if you go through the plugins list on grafana.com.

Hey Daniel. I’m working on a grafana panel. I’m considering using mocha+karma+sinon since I need to render graph on DOM. Do you think I need to mock grafana/app/plugins/sdk as well?

Hey Daniel,
I tried mocha and jest to do unit test on my panel plugin. Both of them gave me the same error. So I guess I’ve done something wrong, not the test tools fault.
I tried to use jest to mock the imported module of grafana, while it seems not working. It was the same thing when I use sinon to stub. Is this the problem of how I importing modules? I did have mocks dir which has the faked sdk(clone from grafana/granfan-mocks-sdk). However, it keeps yelling at me for the same reason.
May be I don’t understand this dependency. Grafana is not locally installed through npm then why the build tool can correctly locate them while test framework can not?
There are many good plugins examples for us to learn from on how to develop a grafana plugin while for unit tests there are barely valuable references. Many links you put above is invalid now. Could you please take a look at my case. Thank you so much! I’ve been stuck here for two days. I really want to make some progress.

This is the error I got.

30%20PM

How I imported MetricsPanelCtrl in my diagramCtrl.js.

46%20PM

In diagramCtrl.test.js, I tried to mock this dir.

02%20PM

This is the project structure:

25%20PM

This is the package.json:

The webpack.config.js:

03%20PM

you might need to try moduleNameMapper in your jest.config.js, I’ve used something like this before transitioning to typescript and the new @grafana/toolkit method.

examples of javascript + sdk + jest are rare.

If you can move to typescript the @grafana/toolkit does quite a bit of the setup for testing (and webpack).

module.exports = {
  verbose: true,
  moduleNameMapper: {
    'app/plugins/sdk': '<rootDir>/node_modules/grafana-sdk-mocks/app/plugins/sdk.ts',
  },
  transformIgnorePatterns: ['<rootDir>/node_modules/(?!grafana-sdk-mocks)'],
  testRegex: '(\\.|/)([jt]est)\\.js$',
  moduleFileExtensions: ['js', 'jsx'],
};

Hey man, thank you so much! It did solve my issue.

  1. Install the grafana-sdk-mocks in dev-dependency
  1. Let jest can locate it by writing moduleNameMapper: ‘app/plugin/sdk’:’/node_modules/grafana-sdk-mocks/app/plugins/sdk.ts’.
  1. I use javascript in my src/test code, while the mocks package is in typescript, so install typescript and ts-jest as well in dev-dependency.
  1. transformIgnorePatterns: [’/node_modules/(?!grafana-sdk-mocks)’], you need make sure all files except the sdk mocks will not be transformed.
  1. moduleFileExtensions: [js, jsx, ts, tsx, node, json]. I have to include all of them because I’m using js as src/test and ts as dependency.

If only include js error will occur:
Cannot find module '../features/panel/panel_ctrl' from 'sdk.ts'

  1. As for testRegex, I put all my test files under /test/, so seems not necessary.
    I will update if I encounter more valuable issues and solutions.