How to test the ComboBox using react-testing-library

[Christian]

Hi

I am struggeling writing a test controlling the KendoReact ComboBox using react-testing-library. I guess I am not the first trying to achieve that. I am just trying to select the combobox and change the selected value. How can I do that?

 

Regards,

Christian

[Stefan]

Hello, Christian,

Currently, we are using Enzyme for our unit tests.

If you think that the Enzyme tests can prove useful in this case, please let me know and I will share the files.

As for react-testing-library, we are not experts in it as we use a different testing tool. Still, our components are standard React components, and they can be tested with react-testing-library with no issues.

Also, if you would like I can convert this to a public forum post, so if anyone from the community is using react-testing-library, they can share personal experience.

Regards,
Stefan
Progress Telerik

[Christian]

Hi Stefan

 

I would be interested in the Enzyme unit test files. Can you share them?

And yes, please convert this issue to a public one.

The main challenge I am facing is the fact, that the drop down list, when it's openened is attached to the body in the DOM. With the react-testing-tools I do not know how to find it. 

What I tried so far, without success is:

- firing ArrowUp and ArrowDown events in the input field 

- typing the new value to the input field (userEvent.type()) but that did not trigger the onChange event 

Regards,

Christian 

 

[Stefan]

Hello,  Christian,

I have attached the entire test folder for the dropdowns packages.

Also, I have made this a public thread in the forum

I hope this proves helpful.

Regards,
Stefan
Progress Telerik

[Christian]

For future reference: the the drop down list which is attached to the body in the DOM can be found under renderResult.baseElement.

[Stefan]

Hello, Christian,

Thank you for sharing this information.

I'm sure that it will save time for other members of the KendoReact community.

This is highly appreciated.

Regards,
Stefan
Progress Telerik

[Julian]

Recently we starting looking at switching from Enzyme to use react-testing-library because we want to make our tests more block box vs white box (testing as a user would test, click on this and expect data to load, etc.). However, we are running into this same issue. Are there any test documented using a Kendo React DropDownList successfully with react-testing-library?

 

Thanks!

Julian Boardman

[Stefan]

Hello, Julian,

We have customers using react-testing-library, but as the testing framework/library is a developer preference we do not have specific documentation around it as there is a large range of testing solutions.

We also have e2e tests, but they are currently on Nightwatch.js:

https://nightwatchjs.org/

We are also considering trying react-testing-library and if we decide to use it internally, we will share the tests.

As you have a valid license, you will be able to access the source code with our current e2e test and check if some of them can prove helpful as well:

https://www.telerik.com/kendo-react-ui/components/installation/source-code/

Each package has an e2e folder with the tests.

Regards,
Stefan
Progress Telerik

[Christian]

Hi Julian

Please find attached the functions we use to test components with a ComboBox.

We did not succeed in testing DateInput fields with react-testing-libarary yet. Any help on that would be appreciated.

Regards,

Christian

 

[Stefan]

Hello, Christian,

Thank you for sharing the solution with the KendoReact community it is a great help.

As for the DateInput testings, could you please share the specific issues that you have encountered when testing the DateInput?

Regards,
Stefan
Progress Telerik

[Christian]

Hi Stefan

We were not able to set the desired value to the DateInput field. I just learned that issue is fixed with a newer version of the userEvent library where we can use "paste" instead of "type". See attached image.
Regards, Christian

[Julian]

Thank you both for your feedback!

I'll try my hand at using what Christian has provided.
The reason we’re looking to switch is that it seems to us the industry is going more towards Black Box testing vs White Box testing:
https://www.element7.io/2020/01/react-white-box-vs-black-box-testing/

(I accidentally said block box previously) Once we started using React Hooks, suddenly we realized that all our Enzyme tests were just testing the methods our components were calling rather than testing through the component. What that meant was if we wanted to use black box testing, we would need to be able to fire events.
Using Enzyme I was able to get a DropDownList to fire an event, but Enzyme still requires you to manage the state manually by using methods like waitfor(), wrapper.update(), process.nextTick(), etc.
I had to add an id to see the correct component, rather than just looking for the type of object as in react testing library. Here is an example I make for comparison. I haven’t run the tests because I’m not sure how to run them on StackBlitz, but they would look something like this:
https://stackblitz.com/edit/react-ctt7do?file=app/main.jsx

Here’s another blog comparing Enzyme to React Testing Library.
https://www.benmvp.com/blog/react-testing-library-over-enzyme/

Thanks again!
Julian

[Stefan]

Hello, Julian, Christian,

Thank you both for the information and the details.

As we are not express in all testing libraries, we can help in providing options/features in the components that will make testing them easier.

If you have a specific request that you know will make the testing possible in these cases, please let us know and we will log it.

Regards,
Stefan
Progress Telerik