how to execute test for "simple" sample custom widget?

[Anonymous User]

Hello All,

I'm trying to run the test provided w/ the sample custom widget "simple".  

I'm assuming that I need to create a package.json and install some dependencies but not clear on what and I don't see documentation on jimu-for-test.

Can someone please point me in the right direction?

Thanks!

--john

[Grant-S-Carroll]

There are already scripts in the package.json to run the tests. 

You can execute them using the following commands by executing them in the client folder.

npm run test

or 

for the watch

npm run test:watch

I've pushed these both out in to .bat files to make it simpler to execute them. I;ve been writing a few tests recently and was planning on putting together a cheat sheet on the complications I've found so far when wrting unit tests for custom widgets.

Hope that helps

[Anonymous User]

Thanks for your suggestion Grant.  When I try, I get the error:

 FAIL  your-extensions/widgets/simple/tests/simple-widget.test.tsx
  ● Test suite failed to run

    TypeError: global.systemRegister is not a function

[Grant-S-Carroll]

Hi John

Right, sorry about that. Looks like there is an issue with the setup-test.js file under the folder, client/jimu-for-test/setup-jest.js

I've modifed this to match what I have in ExB 1.2 see below, basically commented out the Enzyme imports.

require('jest-fetch-mock').enableMocks()
const { System } = require('systemjs');
//const Enzyme = require('enzyme');
//const Adapter = require('@wojtekmaj/enzyme-adapter-react-17')
//Enzyme.configure({ adapter: new Adapter() });

global.systemRegister = System.register;

I havent had a chance to dig any deeper, but i suspect its and issue with the Enzyme or Adapter imports. What this means that in your tests you may have to import them like below.

import { React } from 'jimu-core';
import _Widget from '../src/runtime/widget';
import { widgetRender, wrapWidget } from 'jimu-for-test';

//Configure Enzyme here
const Enzyme = require('enzyme');
const Adapter = require('@wojtekmaj/enzyme-adapter-react-17')
Enzyme.configure({ adapter: new Adapter() });

const render = widgetRender();
describe('test simple widget', () => {
  it('simple test', () => {
    const Widget = wrapWidget(_Widget, {
      config: {exampleConfigProperty: 'a'},
    });
    const {queryByText} = render(<Widget widgetId="Widget_1" />);
    expect(queryByText('exampleConfigProperty: a').tagName).toBe('P');
  })
});

However, with the above changes I was able to get the out of the box test to run.

Cheers

[Anonymous User · Accepted solution]

Thanks again Grant.  It seemed like I just had to re-arrange the imports in client/jimu-for-test/setup-jest.js to:

require('jest-fetch-mock').enableMocks()
const { System } = require('systemjs');
global.systemRegister = System.register;
const Enzyme = require('enzyme');
const Adapter = require('@wojtekmaj/enzyme-adapter-react-17')
Enzyme.configure({ adapter: new Adapter() });

[Grant-S-Carroll]

Nice, will update my 1.4 instance to match.

Cheers