topic Re: how to execute test for "simple" sample custom widget? in ArcGIS Experience Builder Questions

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

Anonymous User — Sat, 10 Jul 2021 21:45:54 GMT

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

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

Grant-S-Carroll — Sat, 10 Jul 2021 21:53:07 GMT

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

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

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

Anonymous User — Sun, 11 Jul 2021 03:44:22 GMT

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

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

Grant-S-Carroll — Sun, 11 Jul 2021 20:45:00 GMT

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

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

Anonymous User — Mon, 12 Jul 2021 22:31:34 GMT

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() });

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

Grant-S-Carroll — Mon, 12 Jul 2021 22:35:06 GMT

Nice, will update my 1.4 instance to match.

Cheers