Input components and snapshot testing

[Brenden]

My app is currently using snapshot testing via Jest for a large amount of tests. We are running into issues when testing our components with form inputs where kendo inputs (especially the numeric textbox) are being compiled with dynamic ids that are unique every build.

As an example ): 

01.<kendo-numerictextbox
02.     class="k-widget k-numerictextbox ng-untouched ng-pristine ng-invalid"
03.     dir="ltr"
04.     formcontrolname="hours"
05.     id="hours-input"
06.     ng-reflect-format="n0"
07.     ng-reflect-max="24"
08.     ng-reflect-min="0"
09.     ng-reflect-name="hours"
10.     ng-reflect-placeholder="hours">
11.
12.    <span
13.        class="k-numeric-wrap">
14.        <input
15.          aria-valuemax="24"
16.          aria-valuemin="0"
17.          aria-valuenow=""
18.          autocomplete="off"
19.          autocorrect="off"
20.          class="k-input k-formatted-value"
21.          id="k-eb1c258b-69a0-7f82-72b5-77634a5c7263"
22.          ng-reflect-events="[object Object]"
23.          placeholder="hours"
24.          role="spinbutton"
25.          tabindex="0"
26.          title="" />
27.    </ span>
28.</ kendo-numeric-textbox>

 

As you can see I've added my own id (#hours-input) to the kendo-numerictextbox element but the input element that is nested within the numeric-textbox has a generated id I cannot define (#k-eb1c258b-69a0-7f82-72b5-77634a5c7263). Since the id is generated each time the component is compiled it's different each time the test is run and fails because that id doesn't match the existing snapshot.

I've tried not importing the InputsModule in my test and included a NO_ERRORS_SCHEMA in my test setup but then I get errors because the inputs that the form needs for logic testing aren't created due to the lack of the InputsModule. 

This makes snapshot testing of what's being rendered in our app very difficult. Is there anyway to define what the interior input ids generated or another way we can test inputs in forms without importing the Kendo InputsModule?

 

[Ivan]

Hi Brenden,

There is no way control ids if the inner input of kendo-numerictextbox, but you can use jest property matchers , which provides fine grained control of the way properties are matched.​

Hope this will help you.

Please do not hesitate to ask in case of any further questions regarding this case.

Regards,
Ivan
Progress Telerik

[Brenden]

Hi Ivan, 

 

Unfortunately I believe the Jest property matchers only work object snapshots and not snapshots of the DOM (at least I haven't been able to get it to work when I've tried). We'll have to find other ways to test what's rendered by Kendo components when working with forms. Thanks.                 

[Ivan]

Hello Brenden,

One thing you can do is to addSnapshotSerializer, which will exclude id property from snapshot.

Please refer to this article of official jest documentation.
The other way is to override toMatchSnapshot matcher in jest.

Hope this will help you.

Regards,
Ivan
Progress Telerik

[Jeff]

For those that stumble across this in the future and are using Jest, you can mock the `guid()` function that Kendo uses to generate these IDs using

jest.mock('@progress/kendo-react-common', () => {
  const originalModule = jest.requireActual('@progress/kendo-react-common');

  return {
    __esModule: true,
    ...originalModule,
    guid: () => 'kendo-test-guid',
  };
});