This is a migrated thread and some comments may be shown as answers.

How to test the ComboBox using react-testing-library

12 Answers 278 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Christian
Top achievements
Rank 1
Veteran
Christian asked on 06 Jan 2020, 10:34 AM

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

12 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 07 Jan 2020, 07:59 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Christian
Top achievements
Rank 1
Veteran
answered on 07 Jan 2020, 08:20 AM

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 

 

0
Stefan
Telerik team
answered on 08 Jan 2020, 09:12 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Christian
Top achievements
Rank 1
Veteran
answered on 06 Mar 2020, 01:08 PM
For future reference: the the drop down list which is attached to the body in the DOM can be found under renderResult.baseElement.
0
Stefan
Telerik team
answered on 09 Mar 2020, 07:16 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Julian
Top achievements
Rank 1
answered on 09 Dec 2020, 11:01 PM

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

0
Stefan
Telerik team
answered on 10 Dec 2020, 06:21 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Christian
Top achievements
Rank 1
Veteran
answered on 10 Dec 2020, 07:01 AM

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

 


0
Stefan
Telerik team
answered on 10 Dec 2020, 03:01 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Christian
Top achievements
Rank 1
Veteran
answered on 10 Dec 2020, 03:51 PM

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

0
Julian
Top achievements
Rank 1
answered on 10 Dec 2020, 11:48 PM

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

0
Stefan
Telerik team
answered on 11 Dec 2020, 02:27 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
Christian
Top achievements
Rank 1
Veteran
Answers by
Stefan
Telerik team
Christian
Top achievements
Rank 1
Veteran
Julian
Top achievements
Rank 1
Share this question
or