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

Testing NumericTextBox with Enzyme and Jest

1 Answer 414 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Arek
Top achievements
Rank 1
Veteran
Arek asked on 16 Nov 2020, 09:33 AM

Hello,

We are using KendoReact 3.17.

I've tried to write a test using Jest and Enzyme to check if NumericTextBox will fire onChange callback when I'll change input.

Unfortunately, I'm not able to fire onChange callback within test.

I've created sandbox environment with test here:

https://codesandbox.io/s/react-enzyme-sandbox-forked-mtiuz?file=/src/components/Hello.test.js

Maybe there is other way I can test NumericTextBox to achieve same result?

Best regards,

Arek

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 16 Nov 2020, 10:27 AM

Hello, Arek,

Thank you for the details.

We use Enzyme for the internal tests as well and this is the test we have on the onChange event:

    it('should fire onChange event once and with correct value', () => {
        let c = 0;
        let val: number = 0;
        const onChange = (e: any) => { c++; val = e.value; };
        const wraped = mount(<NumericTextBox onChange={onChange} />);
        const numeric = wraped.find(NumericTextBox);
        const input = numeric.find('input');
        const el = (input.getDOMNode() as HTMLInputElement);
        el.value = '27';
        el.selectionStart = 2;
        el.selectionEnd = 2;
        input.simulate('change');
        expect(c).toBe(1);
        expect(val).toBe(27);
    });

For all licensed users, the full source code is available with all of the tests. If you have a valid license, you can download the source code and find all tests we have in the path:

packages/inputs/test/NumericTextBox.tsx

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

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
Arek
Top achievements
Rank 1
Veteran
Answers by
Stefan
Telerik team
Share this question
or