Testing NumericTextBox with Enzyme and Jest

2 posts, 0 answers
  1. Arek
    Arek avatar
    3 posts
    Member since:
    Nov 2020

    Posted 16 Nov 2020 Link to this post

    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

  2. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 16 Nov 2020 Link to this post

    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/.

Back to Top