如何在React Native App中测试onRefresh和OnNavigationStateChange

Question

我在本机应用程序中要尝试进行单元测试的WebView组件。我很难弄清楚如何测试onRefreh和onNavigationStateChange之类的方法。

这是一个使用笑话/酶进行测试的本机应用程序。

result?.data?.listCustomerRegistrations?.items!.forEach {
    if $0?.firstInitial == self.firstInitialTextField.text && $0?.lastInitial == self.lastInitialTextField.text && $0?.needIndicatorId == self.numberNeedIndicatorTextField.text {
        print(($0?.marketName)! + " " + ($0?.primaryLanguage)!)
        return 
    }
    else if $0?.firstInitial != self.firstInitialTextField.text || $0?.lastInitial != self.lastInitialTextField.text || $0?.needIndicatorId != self.numberNeedIndicatorTextField.text {
        print("That info is not in our records.")
        return 
    }
}

这是一些测试：

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={{ uri: url }}
                        onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
                        onNavigationStateChange={this.onNavigationStateChange}
                    />
                </View>
                {navBar}
            </View>
        );
    }
}

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

我对这最后一句话说错了：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); }) canGoForward TypeError: Cannot destructure property

关于如何测试onRefresh和onNavigationStateChange的任何建议？