Upon transitioning to Expo48 Meeting, a new issue has arisen: TypeError - The 'exists' property is unreadable due to being undefined

When I upgraded my project from Expo45 to Expo48, I started encountering an error during testing:

TypeError: Cannot read properties of undefined (reading 'exists')
at exists (node_modules/expo-asset/src/PlatformUtils.ts:65:17)  
at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)  
at _next (node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9)

The test itself is very simple:

  it('Should render properly', () => {
    render(
      <UserContext.Provider
        value={[initialState, jest.fn()]}
      >
        <UpdatePasswordScreen />
      </UserContext.Provider>,
    );
  });

This is what the UpdatePasswordScreen component looks like:

    <View style={styles.container}>
      <Spinner
        visible={showSpinner}
        textContent={'Loading...'}
        textStyle={{
          color: '#FFFFFF',
        }}
      />
      <CustomInput
        titleStyle={{
          size: 13,
        }}
        titleContainerStyle={{
          marginBottom: 10,
        }}
        containerStyle={{
          marginBottom: 8,
        }}
        placeholder="Enter Password"
        title="Old password"
        value={oldPassword}
        secureTextEntry={!showOldPassword}
        onRenderLeftIcon={() => (
          <Icon
            name={showOldPassword ? 'eye' : 'eye-off'}
            type="feather"
            size={20}
            color="#AFB4B9"
            onPress={() => setShowOldPassword(!showOldPassword)}
          />
        )}
        onChangeText={setOldPassword}
      />
      <View style={styles.confirmButton}>
        <IconButton
          text="Reset Password"
          buttonStyle={{
            height: 52,
            width: 200,
          }}
          onPress={updatePassword}
          disabled={!oldPassword || !newPassword
            || !confirmNewPassword || showPasswordErrorMessage()
            || newPassword !== confirmNewPassword
            || oldPasswordUnchanged
          }
        />
      </View>
    </View>

I'm having trouble rendering the component even though the unit test ran successfully in Expo45. Any suggestions on how to fix this issue?

I appreciate any help!

Please advise on solving this problem.

Answer №1

To resolve the issue, I included the following code snippets in my jest setup file:

jest.mock("expo-font");
jest.mock("expo-asset");

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Failure to send Websocket connection

Currently working on PHP, here's a snippet: $room_array = array(); $room_array[0] = 'room-list'; $room_array['info'] = array('room_name' => $room['room_name'], 'owner' => $username['usernam ...

The JSON file overwrites entire objects instead of targeting individual ones

Is there a way to update just one specific object in a JSON file without affecting the rest? I've implemented a put request on the front-end using axios to send data to the back-end for processing. However, the current functionality replaces all obje ...

Press the button to access the URL within the current window

Working with Angular, I attempted to develop a function to open a URL in the current window. However, the code below within the controller actually opens a new window: $scope.openUrl = function(url) { $window.open(url); }; ...when using ng-click=&apo ...

Establish accuracy on additional inputs through directives when button is clicked within AngularJS

I lack familiarity with AngularJS directives because I typically rely on controllers. Can directives be used to set validity on other inputs? Specifically, I am trying to set validity on a certain input text when a button is clicked, but I can't figur ...

Enhancing Bootstrap modals with dynamic content and integrating Ajax for dynamic data retrieval in Laravel

I am facing some challenges while coding in Laravel, specifically with passing data to a modal (using the Bootstrap framework) and sending data to an Ajax post request. I have an array of items with an 'id', a 'name', and 'content& ...

What could be the reason that my Javascript function is not displaying in the HTML document?

I'm currently working on developing an HTML page that displays random quotes by Mark Twain. The function and array of quotes are set up in a separate Javascript file which is linked to the main HTML document. However, I am facing an issue where the ou ...

Implementing conditional statements using jQuery for multiple selections

Having two unique IDs, I am planning to set a condition that corresponds with my query. $("#foo", "#bar").foo.bar({ baz: function() { if(selector == "#foo") { console.log("foo"); } else { console.log("bar"); } } }); ...

What is the method to identify which event is activated when interacting with a button on a web browser?

Currently utilizing vue, bootstrap 4, and bootstrap-vue. My main objective is to resolve a visual glitch that emerges when I interact with a button (refer to the animated screenshot provided). This issue is evident at the bottom of the table, where unwant ...

Incorporating AngularJS into JSP for Seamless Integration

As part of our application upgrade, we are transitioning from JSP to AngularJS one module at a time. One challenge we face is transferring user data from JSP to AngularJS (specifically index.html). We aim for a smooth transition where invoking the Angular ...

The formatting of the datepicker-popup is malfunctioning when the initial value is set within the scope

I have implemented the Angular UI bootstrap date picker popup using a custom directive on Plunker (http://plnkr.co/edit/053VJYm1MpZUiKwFTfrT?p=preview): //Module var userModule = angular.module("userModule",['ui.bootstrap']); //Controller userM ...

What is the best way to redirect a user to a different URL in Express while also sending additional data along with the request

[NODE, express] Developing a Facebook application where user grants access and is redirected to my site with a unique code at abc.com/heyBuddy/fb/callback?code="adasdasdasda". Once the code is received in route router.get('/heyBuddy/fb/callback', ...

When applying the `toString()` method to a new array of length 5, it

I tried to understand the code snippet by referring to a specific link. However, I'm puzzled as to why it's displaying four commas in the console. As I'm generating an array with five items, could you please explain how it functions? ...

Has the web application continued to run in the background even after toggling between tabs on the browser?

Does the app continue running in the background even when I'm not on that specific tab? Or does it pause when I switch between tabs, requiring a new request to the server for any updated data from the database upon returning to that tab? Edit: Curren ...

The terser-webpack-plugin and uglifyjs-webpack-plugin are both powerful tools for optimizing

WebPack 4 now utilizes the terser-webpack-plugin in production mode or when the -p argument is specified, which essentially means including --optimize-minimize --define process.env.NODE_ENV="production". This plugin is responsible for minimizing ...

Switch out the play pause button on an embedded YouTube video player

Is it possible to customize the play/pause button on YouTube iframes using CSS? I have several iframes and would like to change the default red play button. I've attempted the following code: .ytp-large-play-button{ background: url(play.png); } ...

I need help figuring out how to set the country code as uneditable and also display a placeholder in react-phone-input-2 with React

How can I display the placeholder after the country code without allowing it to be edited? Currently, it's not showing up in my React functional components. Here is the code snippet: <PhoneInput className="inputTextDirLeft" ...

Error in Function Due to Undefined jQuery DataTable Parameters

In the jQuery datatable column, the below JavaScript code will display either a green checkmark button or a red X button: { data: "HasPayment", render: function (data, type, row, meta) { if (data) { return '<bu ...

Elevate the value within a function and refresh the said function

I'm currently facing a challenge with this particular piece of code, let spin = new TimelineMax(); spin.to($('.particle'), 150, { rotation: 360, repeat: -1, transformOrigin: '50% 50%', ease: Linear.easeNone }); Th ...

Template for Gatsby's alternative layout design

I have recently developed a template for pages that showcase a single product (blog-post.js). However, I now require a different type of page with its own template (category-post.js) to display all products within a specific category. Since the number of c ...

Struggling with testing the checkbox when it changes inside the CardHeader Avatar={} component

I've recently implemented a feature similar to the example showcased on MaterialUI's TransferList. However, I'm encountering difficulties accessing a checkbox within the avatar={}. The project utilizes Jest and Enzyme for testing purposes. T ...