react-native - 测试用提供者包裹的反应原生屏幕

Question

我正在尝试实施我的第一个测试，但我的提供者包装组件时遇到了问题。

我有一个简单NotificationsScreen.tsx的显示来自我的通知NotificationsContext：

NotificationsScreen.tsx

const NotificationScreen = (): ReactElement => {
    const {notifications, loadMoreNotifications} = useNotification();

    return (
        <FlatList data={notifications}
                  keyExtractor={((item) => item.id)}
                  renderItem={({item}) => <NotificationRow notification={item}/>}
                  onEndReached={loadMoreNotifications}
        />
    );
};

NotificationProvider.tsx ：

export const NotificationContext = createContext<NotificationContextInterface>(initialState);
const NotificationProvider = (props: PropsWithChildren<any>) => {
    const [notifications, setNotifications] = useState();
    const notificationApi = useNotificationApi();
    const [badgeCount, setBadgeCount] = useState<number>(0);

    /**
     * On provider mounted, get user notifications.
     */
    useEffect(() => {
        notificationApi.index()
            .then((response) => {
                setNotifications(response);
                setBadgeCount(response.length);
            });
    }, []);
    /**
     * Mark a notification as read.
     *
     * @param {Notification} notification - The notification marked as read.
     */
    const notificationRead = (notification: Notification) => {
        ...
    };

    /**
     * Load more notifications
     *
     * @return {Promise<void>}
     */
    const loadMoreNotifications = (): Promise<void> => {
        ...
    };

    return (
        <NotificationContext.Provider
            value={{
                notifications,
                notificationReceived,
                setNotificationChunk,
                notificationRead,
                loadMoreNotifications,
                badgeCount,
                notificationGranted
            }}>
            {props.children}
        </NotificationContext.Provider>
    );
};

UseNotification.tsx

const useNotification = (): NotificationContextInterface => useContext<any>(NotificationContext);

export default useNotification;

我尝试在测试开始时实现提供者模拟：

jest.mock("../../providers/NotificationProvider", () => {
    const React2 = require("react");
    const FakeContext = React2.createContext({});

    const notifications: Notification[] = [
        {
            id: "abc",
            created_at: "2021-03-01",
            data: {
                title: "Notification title.",
                description: "Notification description.",
                resource_id: 0
            },
            type: "orderCreated",
            formatted: {
                created_at: "5 minutes ago"
            }
        },
        {
            id: "def",
            created_at: "2021-03-01",
            data: {
                title: "Notification title.",
                description: "Notification description.",
                resource_id: 0
            },
            type: "orderCreated",
            formatted: {
                created_at: "10 minutes ago"
            }
        }
    ];

    const notificationProviderProps: NotificationContextInterface = {
        notifications,
        setNotificationChunk: jest.fn(),
        notificationReceived: jest.fn(),
        notificationRead: jest.fn(),
        loadMoreNotifications: jest.fn(),
        badgeCount: notifications.length,
        notificationGranted: true
    };

    return ({children}: { children: any, value: any }) => {
        return <FakeContext.Provider value={notificationProviderProps}>
            {children}
        </FakeContext.Provider>;
    };
});

然后尝试渲染我的屏幕：

it("Render default", () => {
    const screen = create(
        <NotificationProvider>
            <NotificationScreen/>
        </NotificationProvider>
    );
});

但不幸的是，我的屏幕似乎无法访问该上下文......这是日志跟踪：

TypeError: (0 , _useNotification2.default) 不是函数

我做错了什么？

标签： react-nativets-jestreact-test-renderer