ix-select testing with JEST

[umeWaheed]

Prerequisites

• I have read the Contributing Guidelines.
• I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

I'm writing test cases for a react application. The following behaviour is expected:

• A dropdown is being populated from an API call's response being set as a state variable
• There is a refresh button which calls the api on click
• Whenever the button is clicked the state is updated and so is the dropdown

Issue:

On writing test case for this scenario:

• The button successfully makes the API call
• The state variable gets updated
• The dropdown does not reflect the updated state

What type of frontend framework are you seeing the problem on?

React

Which version of iX do you use?

v2.0.0

Other dependencies:

"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"@testing-library/jest-dom": "^6.4.6",
"@testing-library/react": "^16.0.0",
"@testing-library/user-event": "^14.5.2",

Code to produce this issue.

// For the code I've not been able to make the testcase run on stackblitz, but you can get an idea what I'm trying to do

https://stackblitz.com/edit/1zkw8s-96beuv?file=src%2Fdropdown.test.tsx

[danielleroux]

Test not running at all in example

 FAIL  src/dropdown.test.tsx
  ● Test suite failed to run

    TypeError: Cannot read properties of undefined (reading 'html')

      at new JSDOMEnvironment (file:/home/projects/1zkw8s-96beuv/node_modules/jest-environment-jsdom/build/index.js#cjs:72:44)

Please prepare a Github repo which shows the issue.

[umeWaheed]

@danielleroux please check the following stackblitz code

Github repo: https://github.com/umeWaheed/ix-select-testing

[danielleroux]

Please setup your unit-tests correctly you have to mock the call or handle the async behaviour of your fetch request:

<button
        data-testid="add-btn"
        onClick={() => {
          setExistingPlatformsList([
            {
              name: 'Test1 ',
            },
            {
              name: 'Test2 ',
            },
            {
              name: 'Test3 ',
            },
          ]);
        }}
      >
        Fetch more ...
      </button>

expect(newLen).toBe(4);

I close this issue regarding the wrong test behaviour not an actual issue. Feel free to open or a create a new issue if you still found an issue in the library.

[umeWaheed]

I've been able to resolve this issue by using
fireEvent(<dropdown element>, new CustomEvent('valueChange', { detail: <text of the option> }));