How to test onRefresh and OnNavigationStateChange in react native app

I have a WebView component in a react-native app that I am trying to unit test. I ham having difficulty figuring out how to test class methods like onRefreh and onNavigationStateChange.

This is a react-native app using jest/enzyme for testing.

class InlineWebView extends CorePureComponent<Props, State> {
    webView: React.RefObject<WebView> = React.createRef<WebView>();
    state: Readonly<State> = {
        canGoForward: false,
        canGoBack: false,
    };


    onBack = (): void => {
        const { current } = this.webView;
        if (current) {
            current.goBack();
        }
    }

    onForward = (): void => {
        const { current } = this.webView;
        if (current) {
            current.goForward();
        }
    }

    onRefresh = (): void => {
        const { current } = this.webView;
        if (current) {
            current.reload();
        }
    }

    onNavigationStateChange = (navState: NavState): void => {
        this.props.onNavigationStateChange(navState);

        const { canGoForward, canGoBack } = navState;
        this.setState({ canGoForward, canGoBack });
    }

    render(): JSX.Element {
        const { theme, globalThemeVars, url, showControls, onShouldStartLoadWithRequest } = this.props;
        const { canGoBack, canGoForward } = this.state;
        const { container, viewContainer } = createStyles(theme, globalThemeVars);

        const navBar = (showControls) ? (
            <WebNavBar>
                <Button icon="CHEVRON_BACK_THIN" onPress={this.onBack} isDisabled={!canGoBack} />
                <Button icon="CHEVRON_FORWARD_THIN" onPress={this.onForward} isDisabled={!canGoForward} />
                <Button icon="REFRESH" onPress={this.onRefresh} />
            </WebNavBar>
        ) : null;

        return (
            <View style={container}>
                <View style={viewContainer}>
                    <WebView
                        ref={this.webView}
                        source=
                        onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
                        onNavigationStateChange={this.onNavigationStateChange}
                    />
                </View>
                {navBar}
            </View>
        );
    }
}

export default withCore<Props>(InlineWebView, defaultTheme, {
    showControls: true,
    onShouldStartLoadWithRequest: (): boolean => true,
    onNavigationStateChange: (): void => { /* noop */ },
    theme: {},
});

and here are some tests:

describe("WebView", () => {
    let wrapper;

    beforeEach(() => {
        wrapper = shallow(
            <WebView
                url="www.example.com"
                showControls={true}
                theme=
                globalThemeVars=
                onShouldStartLoadWithRequest={mockNavChange}
                onNavigationStateChange={mockLoadRequest}
            />,
        );
    });

    test("renders correctly", () => {
        const tree = renderer.create(<WebView />).toJSON();
        // console.log("TREE", tree.children[0].children[0].children)
        expect(tree).toMatchSnapshot();
    });

    it("passes props", () => {
        expect(wrapper.props().style).toEqual(100);
        expect(wrapper.props().children[0].props.style).toEqual(200);
    });

    it("calls onNavigationStateChange", () => {
        wrapper.setState({
            canGoForward: false,
            canGoBack: false,
        })
        wrapper.instance().onNavigationStateChange();
        console.log('NAV STATE CHANGE', wrapper.props().children[0].props.children.props.onNavigationStateChange);
    })

I am getting an error on this last one saying: TypeError: Cannot destructure propertycanGoForwardof 'undefined' or 'null'.

Any advice on how t test onRefresh and onNavigationStateChange?