nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Find more posts tagged with

Accepted answers

Anonymous User

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

All comments

Anonymous User

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

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

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

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.