Unit tests with Jest and Enzyme in React custom plugin

[sandysansan]

Hi everyone!
Several days that I struggle with this problem . I’m a Grafana total newbie :-D!
I’d like to run unit tests with JEST and ENZYME in my custom plugin, installed with

npx @grafana/toolkit plugin:create my-grafana-plugin

I’ve followed instructions there @grafana/toolkit - npm about testing plugin, created /config/jest-setup.ts with code provided.
I didn’t change jest.config.js as recommended.

Here’s my simple test code :

import React from 'react';
import { FFTPage } from './FFTPage';
import {SelectSession} from './SelectSession/SelectSession'
import { shallow } from 'enzyme';

describe('FFTPage', () => {
  it('contains SelectSession', () => {
    const wrapper = shallow(<FFTPage />)
    expect(wrapper).toContain(<SelectSession />)
  })
});

Here’s the package.json in plugin root :

{
  "name": "custom-plugin",
  "version": "1.0.0",
  "description": "FTT Zoom",
  "scripts": {
    "build": "grafana-toolkit plugin:build",
    "test": "grafana-toolkit plugin:test",
    "dev": "grafana-toolkit plugin:dev",
    "watch": "grafana-toolkit plugin:dev --watch",
    "format": "prettier --write \"{,!(node_modules|dist|typedoc|docs)/**/}*.{ts,tsx}\""
  },
  "repository": "github:grafana/simple-react-panel",
  "author": "Grafana",
  "license": "Apache-2.0",
  "bugs": {
    "url": "https://github.com/grafana/simple-react-panel/issues",
    "email": "plugins@grafana.com"
  },
  "devDependencies": {
    "@grafana/data": "7.0.0",
    "@grafana/toolkit": "7.0.0",
    "@grafana/ui": "^7.0.0",
    "emotion": "10.0.27"
  },
  "engines": {
    "node": ">=12 <13"
  },
  "dependencies": {
    "plotly.js": "^1.58.4",
    "react-plotly.js": "^2.5.1"
  }
}

After running test, this error is thrown :

Test suite failed to run

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

Details:
/home/sandy/asystom_grafana/grafana-7.1.5/node_modules/@iconscout/react-unicons/index.js:1
({“Object.”:function(module,exports,require,__dirname,__filename,global,jest){export { default as Uil0Plus } from ‘./icons/uil-0-plus’;

Do I need to configure a babel file?
Any help will be SO appreciated <3 thanks !
Sandy.