Cannot invoke an object which is possibly 'undefined'

[rogerprz]

Thanks for reporting an issue to us! We're glad you are using and invested in Enzyme.
Before submitting, please read over our commonly reported issues to prevent duplicates!

All common issues

• common issues

Notoriously common issues

• Webpack build issues
• Cannot find module 'react-dom/lib/ReactTestUtils'
• Query Selector fails
• Testing third party libraries

If you haven't found any duplicated issues, please report it with your environment!

Current behavior

I'm getting the error in the title. Maybe i'm not setting it up correctly.
I'm looking to update onGetErrorMessage which then checks it what I pass in is valid. IF it is not valid it updates the ariaLabel which is what i'm expected to equal test error.

 test('should set error when page number not valid and update aria-label', () => {
            const pageChangeCallback = jest.fn().mockName('pageChange callback');

            const tree = mount(
                <DemoPagination
                    pageCount={10}
                    selectedPage={1}
                    onPageChange={pageChangeCallback}
                    validationErrorMessageText="test error"
                />
            )

            const selectedPage = tree.find(TextField);
            console.log('PEPE:', tree.props())
            console.log('SSSS:', selectedPage.props())
            // tree.prop('onGetErrorMessage')('a');
            // console.log('III:', selectedPage.setProps({ onGetErrorMessage: onGetErrorMessage('a') }))
            // selectedPage.instance()
            selectedPage.invoke('onGetErrorMessage')('a');
            // selectedPage.props().onGetErrorMessage('a');
            console.log('AFFFT:', selectedPage.props())
            // selectedPage.props().onGetErrorMessage('a') as any;
            const errorMessage = tree.find(Text).at(2);
            // console.log('EERR:', errorMessage.props())
            expect(errorMessage).toBeDefined();
            // expect(selectedPage.prop('ariaLabel')).toContain('test error');
  });

  <>
      <Text>{initialPagingText}</Text>
      <TextField
          theme={theme}
          styles={classNames.textFieldStyles}
          value={selectedPageString}
          onKeyPress={onKeyPress}
          onChange={onChange}
          onBlur={onBlur}
          onGetErrorMessage={onGetErrorMessage}
          ariaLabel={errorMessage ? `alert error ${errorMessage}` : pagingText}
      />
      <Text>{endingPagingLabelText ?? getEndingPagingText(rangeEndIndex, pageCount)}</Text>
  </>

Expected behavior

For the property function to be called without getting the object which is possibly 'undefined'.

Your environment

API

• shallow
• mount
• render

Version

library	version
enzyme	3.11
react	16.8.5
react-dom	16.8.5
react-test-renderer	n/a
adapter (below)	16

Adapter

• enzyme-adapter-react-16
• enzyme-adapter-react-16.3
• enzyme-adapter-react-16.2
• enzyme-adapter-react-16.1
• enzyme-adapter-react-15
• enzyme-adapter-react-15.4
• enzyme-adapter-react-14
• enzyme-adapter-react-13
• enzyme-adapter-react-helper
• others ( )

[ljharb]

The error you're describing is a TypeScript error, not a JS one. It's got nothing to do with enzyme.