How to test asset loading, getting errors

Expo SDK
1

Please provide the following:

  1. SDK Version: 45
  2. Platforms(Android/iOS/web/all): jest
  3. Add the appropriate “Tag” based on what Expo library you have a question on.

I get a variety of errors such as:

ReferenceError: You are trying to import a file after the Jest environment has been torn down. From tests/App-test.js.

Error: Module “[object Object]” is missing from the asset registry

  it(`renders the root without loading screen`, async () => {
    await act(async () => {
      console.log('pre render');
      await mockFontLoadAsyncPromise;
      await mockAssetLoadAsyncPromise;
      const el = <App skipLoadingScreen />;
      testRenderer = renderer.create(el);
      testRenderer.update();
      jest.runAllTimers();
      tree = testRenderer.toJSON();
      console.log('post render');
    });
    console.log('post act');
    expect(tree).toMatchSnapshot();
  });

Code under test:

export default function App(props) {
    const [isLoadingComplete, setLoadingComplete] = useState(false);
    console.log('App render, isLoadingComplete:', isLoadingComplete);

    useEffect(() => {
        console.log('useEffect');
        async function prepare() {
            console.log('prepare');
            try {
                await SplashScreen.preventAutoHideAsync();
                await loadResourcesAsync();
            } catch (e) {
                console.warn('prepare err:', e);
            } finally {
                // Tell the application to render
                setLoadingComplete(true);
                await SplashScreen.hideAsync();
            }
        }

        prepare();
    }, []);

    if (!isLoadingComplete && !props.skipLoadingScreen) {
        console.log('show loading screen');
        return (
            <Text>Loading...</Text>
        );
    }
    console.log('show app');
    return (
        <GlobalContext.Provider value={defaultContext}>
            <PaperProvider theme={theme}>
                <LoadedApp />
            </PaperProvider>
        </GlobalContext.Provider>
    );
}

async function loadResourcesAsync() {
    console.log('loadResourcesAsync');
    return Promise.all([
        Asset.loadAsync([
            require('./assets/images/robot-dev.png'), // eslint-disable-line global-require
            require('./assets/images/robot-prod.png'), // eslint-disable-line global-require
        ]),
        Font.loadAsync({
            iconfont: require('./assets/generated/iconfont/iconfont.ttf'), // eslint-disable-line global-require
            // This is the font that we are using for our tab bar
            ...MaterialIcons.font,
            // This is the font used by react-native-paper
            ...MaterialCommunityIcons.font,
        }),
        defaultContext.authStore.initialPromise,
    ]);
}

First things first, the require statements throw errors, how do I prevent that? It seems like no matter what I do the code in useEffect gets called after the test ends.

2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.