Transitioning from mui version 4 to version 5 leads to an error message: "TypeError: Cannot access 'keyboardDate' properties of undefined"

After updating from MUI v4 to version v5, I encountered failing tests with the following error:

TypeError: Cannot read properties of undefined (reading 'keyboardDate')

      17 |   it("should render correctly without any errors", () => {
      18 |     expect(
    > 19 |       renderer.create(<DatePickerElement onChange={onChange} value="10/08/1981" />).toJSON(),
         |                ^
      20 |     ).toMatchSnapshot();
      21 |   });
      22 |   // props testing

I followed the migration guide thoroughly and wrapped the component with a new

<LocalizationProvider dateAdapter={AdapterDateFns} utils={DateFnsUtils}>
. The component works fine but the tests keep failing at the render method. Has anyone else experienced a similar issue?

it("should render correctly without any errors", () => {
expect(
  renderer
    .create(<DatePickerElement onChange={onChange} value="10/08/1981" />)
    .toJSON(),
).toMatchSnapshot();  });

Answer №1

After the recent migration, I encountered issues with some Datepicker dependencies that appeared to be unstable or incompatible. Unfortunately, the official mui documentation lacks clarity on specifying compatible versions. However, I found this resource helpful for understanding the pickers migration from @material-ui to @mui.

To resolve the undefined keyboardDate problem, I made sure to install these specific versions of dependencies:

The dependencies I utilized were:

"@date-io/date-fns": "^1.3.13",
"@date-io/moment": "^1.3.13",
"date-fns": "^2.23.0",
"@mui/x-date-pickers": "^5.0.10",
"@mui/lab": "^5.0.0-alpha.112",

Regarding imports: It's important to note that LocalizationProvider, AdapterDateFns, and DatePicker need to be imported from @mui/x-date-pickers, as their locations have shifted in @mui/lab v5.

Syntax example:

<LocalizationProvider dateAdapter={AdapterDateFns} utils={MomentUtils}>
  <DatePicker 
    label='Start Date'
    value={value}
    onChange={handleChange}
    inputFormat="mm/dd/yyyy"
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

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

Tips for updating the minimum value to the current page when the button is pressed on the input range

When I press the next button on the current page, I want to update the value in a certain way. https://i.stack.imgur.com/XEiMa.jpg I have written the following code but it is not working as expected: el.delegate(".nextbtn", "click", f ...

The routing functionality in Angular4 encounters issues when the `router.navigate()` method is used within the callback of a

I am currently working on implementing Google Sign In within my Angular4 app, but I have run into an unusual issue with routing after using router.navigate() in the Google Sign In callback function. To help illustrate this issue, I have created a sample d ...

Connect ngOptions to an array beyond the current scope

Can the ngOptions be bound to a value that is not within the $scope? I have enums that will be generated as JavaScript code. These enums are not currently part of "the angular domain", but I want to bind an ngOptions to one of the arrays without manually ...

Tips for sending multiple JSON objects using the ajax() method

As of now, I have successfully implemented a $.getJSON() call to fetch a JSON string from a specific URL. Here is the simplified code that is currently functioning well: $.getJSON("myURL",function(data){ var receivedJSON = data; }); The retrieved JSO ...

Error during compilation in npm (symbol '_' is not recognized)

After updating all the dependencies in my JavaScript program without making any changes to my components, I encountered an error when running: npm run build The error specifically mentions a problem with one of my components: Failed to compile. ./src/c ...

Nested ui-view is not appearing as expected

I have a query about Angular UI-Router and its ui-views functionality. I am facing an issue where only the ui-view with the name "languages" is displaying, despite declaring three ui-views inside another one. Any assistance in resolving this would be highl ...

express includes a 500 error due to the .html extension for the view engine

I have an express app where I've configured my views to use HTML, but behind the scenes, I'm actually utilizing the ejs engine in order to maintain the .html extension. Here is how it's currently set up: app.set('views', path.join ...

Trouble arises when attempting to create a two-column layout using Material UI's <Grid> component

My goal is to create a two-column layout where each column takes up half of the screen and has equal height. To better illustrate, take a look at this image. The code I've tried so far is not working as expected: import React from "react"; import { ...

The website is experiencing functionality issues with Ajax

On my personal website, I am trying to add a simple ajax server clock in the header section but unfortunately it is not appearing as expected. Here's the snippet of Javascript code that I am using: var httpxml; try { // Firefox, Opera 8.0+, Safari ...

The default value from the mobx-react-form textfield is not being recognized when submitting the

This is the code snippet I am working with: <TextField {...form.$("phone.countryCode").bind()} value={222} /> Here is how the form setup looks like: { name: "phone", fields: [ { name: "c ...

What is the best way to ensure a fixed header remains visible after the keyboard appears on iOS devices

Is there a way to keep the fixed header in place after opening the keyboard on an iOS device? I want the header to remain fixed and not scroll with the content. A similar issue is explained here: https://medium.com/@im_rahul/safari-and-position-fixed-9781 ...

Problem with Gulp-Watch Functionality on Windows 7 - Node.js, NPM, and Gulp All Up and Running Fine

As someone who is new to the world of Node.js, NPM, and other modern tools designed to improve productivity and workflow, I find myself faced with some challenges. Below are the specifications: Node version - v8.10.0 Gulp CLI version - 2.0.1 Gulp Loca ...

Tips for utilizing New FormData() to convert Array data from an Object for executing the POST request with Axios in ReactJs

When working on the backend, I utilize multer to handle multiple file/image uploads successfully with Postman. However, when trying to implement this in ReactJS on the frontend, I find myself puzzled. Here's a sample case: state = { name: 'pro ...

Removing a pin from google maps using a personalized delete button

I have encountered an issue while attempting to remove a marker from Google Maps using a custom delete button within the info window. Even though I have successfully added the button and necessary information, it seems that the function responsible for del ...

Experiencing difficulties with parsing JSON data and storing values in a database

I received a JSON response from the server and need help saving the values in a MySQL database using PHP. Can someone please assist me with this? {"fields":[{"label":"Do you have a website?","field_type":"website","required":false,"field_options":{}," ...

ReactQuill: How to Handle Empty Input Value Validation with Display of HTML Tags

I am facing an issue with validating ReactQuill. Here is the scenario: When I remove the input in ReactQuill Textarea, the last value displayed will be: <p><br></p> Question: How can I validate if the last value will be <p><br ...

Utilizing Typescript for parsing large JSON files

I have encountered an issue while trying to parse/process a large 25 MB JSON file using Typescript. It seems that the code I have written is taking too long (and sometimes even timing out). I am not sure why this is happening or if there is a more efficien ...

Is the ID selector the quickest method in jQuery and CSS?

Which is the optimal choice in jQuery/javascript for speed? $('#myID .myClass') or $('.myClass') What is the preferred option to utilize in CSS? #myID .myClass{} or .myClass{} In hindsight, I realize my explanation was insuffici ...

Encountering an Unexpected Error in Next.js When Revalidating Paths

I'm facing an issue with my Next app where, despite editing a resource through an API endpoint following the pages-based system, the changes aren't reflected when I try to view or re-edit the resource. After checking the documentation, I discover ...

The basic jQuery script seems to be malfunctioning

I am trying to attach an on click event to an li element using jQuery. I have written a simple jQuery code within the document ready function, but for some reason it is not functioning as expected. I have checked in both Chrome and Firefox, and there are n ...