Testing NumericTextBox with Enzyme and Jest

[Arek]

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

[Stefan]

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