更新到 SDK 47 后 Jest-expo 所有测试均失败

Question

在将我的 expo 项目更新到 SDK 47 之前，所有测试套件都非常有效。但是现在我遇到了这些我不知道如何解决的错误。

我注意到那些包现在是用 TS 编写的。也许错误正在解决这个问题。我是否需要更改某些内容才能使带有 TS 的软件包正常工作？

以下是我正在使用的版本：

"devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
    "@types/react-native": "~0.70.6",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.3",
    "babel-plugin-module-resolver": "^4.1.0",
    "babel-preset-expo": "~9.2.1",
    "concurrently": "^7.2.2",
    "deprecated-react-native-prop-types": "^2.3.0",
    "eslint": "^7.32.0",
    "eslint-plugin-jest": "^24.7.0",
    "eslint-plugin-react": "^7.29.4",
    "husky": "^6.0.0",
    "jest-expo": "^47.0.1",
    "jest-json": "^1.1.1",
    "postcss": "^8.4.14",
    "react-native-jest-mocks": "^1.5.0",
    "tailwindcss": "^3.1.4"
  }

我的笑话配置

"jest": {
    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|unimodules-permissions-interface|react-clone-referenced-element|@react-native(-community)?|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|sentry-expo|native-base|@codler/react-native-keyboard-aware-scroll-view|react-native-paper|react-native-paper/.*|expo-modules-core|expo-modules-core/.*|)"
    ],
    "setupFiles": [
      "./jest-setup.js"
    ],
    "setupFilesAfterEnv": [
      "jest-json"
    ]
  }

任何想法？我很感激你的帮助。

更新这是一个示例测试。

import Home from './Home';

import React from 'react';
import {
    cleanup,
    render,
} from '@testing-library/react-native';

import axios from 'axios';
import { Alert } from 'react-native';
import { MockedNavigator, waitFor } from '../../../helpers/testing';

jest.mock('axios');

jest.mock('./Home', () => './Home');

const mockedNavigate = jest.fn();

jest.mock("@react-navigation/native", () => {
    const actualNav = jest.requireActual("@react-navigation/native");
    return {
        ...actualNav,
        useNavigation: () => ({
            navigate: mockedNavigate,
            dispatch: jest.fn(),
            addListener: jest.fn(),
            removeListener: jest.fn(),
        }),
    };
});

beforeAll(() => {
    // Home uses fetch to reload the user, so mock fetch to return a
    // fake user
    global.fetch = jest.fn().mockResolvedValue({
        status: 200,
        ok: true,
        json: () => Promise.resolve({ data: { user: {} } }),
    });
});

afterEach(cleanup);

const setup = async () => {
    return render(
        <MockedNavigator
            routes={[
                { name: 'Home', component: Home },
            ]}
        />
    );
};


describe('API', () => {
    test('Shows error when the request can not be completed', async () => {
        axios.get.mockRejectedValue({
            response: { data: undefined, status: 500 },
        });
        // Mock alert
        Alert.alert = jest.fn();
        await setup();

        await waitFor(() => {
            expect(Alert.alert).toHaveBeenCalledWith('Error', expect.any(String));
        });

    });
});

我已经有 react-native-paper 作为提供者，在我的 MockedNavigator 中如下：

export const MockedNavigator = ({ routes }) => {
    const { Screen, Navigator } = createStackNavigator();

    return (
        <NavigationContainer>
            <Providers>
                <ReservationProvider>
                    <Navigator>
                        {routes.map((props, index) => (
                            <Screen
                                key={index}
                                {...props}
                            />
                        ))}
                    </Navigator>
                </ReservationProvider>
            </Providers>
        </NavigationContainer>
    );
};

---

export const Providers = ({ children }) => (
    <NotificationProvider>
        <GeolocationProvider>
            <SettingsProvider>
                <OAuthProvider>
                    <TailwindProvider>
                        <ThemeProvider>
                            <PortalProvider>
                                <CalendarProvider>
                                    <ForegroundNotification />
                                    {children}
                                </CalendarProvider>
                            </PortalProvider>
                        </ThemeProvider>
                    </TailwindProvider>
                </OAuthProvider>
            </SettingsProvider>
        </GeolocationProvider>
    </NotificationProvider>
);

---

export const ThemeProvider = ({ children }) => {
    const [themeWithFont, setThemeWithFont] = useState(theme);
    useEffect(() => {
        const loadFonts = async () => {
            setThemeWithFont({
                ...theme,
                fonts: {
                    ...theme.fonts,
                    medium: { fontFamily: C.fontFamilyDefault },
                }
            });
        };
        loadFonts();
    }, []);

    return <PaperProvider theme={themeWithFont}>{children}</PaperProvider>;
};

---

import { Provider as PaperProvider } from 'react-native-paper';

Answer 1

@brian-serrano 你找到任何解决方案了吗？