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

The Ajax request is not being triggered when using a different form submit method

Being a tech enthusiast, I have developed a handy function: function blur_slide_visit_count(){ $.ajax({ type: 'POST', url: 'add_save_slide_visitor_count.php', async: false, data: { fillvalue: fieldAr ...

Discovering the id of the current active tabpane is possible by using

Is there a way to retrieve the id of the currently active tab-pane every time I switch tabs on my page? Depending on which tab-pane is active (tab-pane1, tab-pane2, tab-pane3), I want to store the respective value (tab-pane1 = 1 and so on) in a variable an ...

What is the best way to create a clickable <li> element from AJAX search results that display dynamic HTML?

Utilizing AJAX technology, I have implemented a live search feature that populates results from a database as the user types in a text field. The results are presented in an unordered list format. My goal is to allow users to click on an item within the li ...

Most efficient method for nesting child objects within an array of objects using JavaScript

Hey experts, I'm on the hunt for the most efficient method to transform this data: [ { "id": 1, "animal": "cat", "age": 6, "name": "loky" }, { "id": 2, "animal": &quo ...

The issue I am facing is that whenever I use an AJAX POST request,

I encountered an issue where the ajax post method was unable to pass a parameter to the controller, as the controller parameter always appeared as Null. Index.schtml: I attempted to initiate a new view via a parameter by triggering an element in HTML and ...

As the user types, automatically format the input field for a seamless and intuitive experience

My current application is running on Angular 1.3.10 I have implemented a jQuery function to automatically add a backslash to the expiration input field once the user types the third number. Although it was a quick fix, I now aim to move this functionality ...

Conceal the logout option when not logged in

How can I make a logout navlink in my navbar hidden while the user is logged out, but visible when they are logged in? I have tried changing the state onClick with no success and haven't found any helpful answers in my search. As a result, I have deci ...

Error in Redux with TypeScript: "Argument of type 'AsyncThunkAction<any, number, {}>' is not compatible with parameter of type 'AnyAction'"

So I've been working on this dispatch function: const dispatch = useAppDispatch() const handleFetch = (e: React.MouseEvent<HTMLAnchorElement>) => { const target = e.target as Element dispatch(fetchCity(parseInt(ta ...

Is there a way to transition an element from a fixed layout position to an absolute layout position through animation?

I am looking to create a dynamic animation effect for a button within a form. The goal is for the button to move to the center of the form, while simultaneously undergoing a horizontal flip using a scale transform. During the midpoint of this animation, I ...

Tips for effectively integrating data from MongoDB into a React application

Currently, I am utilizing two components to extract data from the database. One component is used to loop through the data entries, while the second one is dedicated to accessing and displaying the details for each entry. Within my database, there is a fie ...

PHP - session expires upon page refresh

I'm in the process of creating a login system for my website and I've run into an issue with updating the navigation bar once a user has logged in. Every time I refresh the page, it seems like the session gets lost and the navigation bar doesn&ap ...

The clash between mootools and jQuery

I'm facing an issue with a simple form on a page that loads both Mootools and JQuery. Even though JQuery is in no conflict mode, I am encountering problems. There's a form input named "name"-- <input class="required" id="sendname" name="send ...

angularjs dynamically display expression based on controller value

I'm not the best at explaining things, so I hope you all can understand my needs and provide some assistance here. Below is a view using ng-repeat: <div ng-repeat="item in allitems"> {{displaydata}} </div> In my controller, I have the f ...

Angularjs still facing the routing issue with the hashtag symbol '#' in the URL

I have recently made changes to my index.html file and updated $locationProvider in my app.js. After clicking on the button, I noticed that it correctly routes me to localhost:20498/register. However, when manually entering this URL, I still encounter a 4 ...

Matching Javascript Variables to CSS Styles

I am currently developing a small HTML page and I am utilizing JavaScript to retrieve the screen dimensions. However, I am facing an issue with passing this variable to a CSS style as shown below. How can I achieve this successfully? Additionally, I have ...

Bringing in a variable from a React component to a JavaScript file

I've created a React component called Button with two states named name and players. Now, I need to access these states in a separate JavaScript file that is not a component. Below are the relevant code snippets: Button.js import {useState} from &qu ...

When the input CTRL+C is entered in the console, Node.js / JavaScript will output

I have a script that I use to restart another script. Here is the code snippet: catch(err){ console.log(err) webhook.send(`Error monitoring **www.-.com**, restarting monitor.`) await browser.close() await sleep(monitorDelay) return chec ...

The property 'join' is undefined for null values

I've recently started learning AngularJS, but I'm having trouble figuring out what's causing issues in my code. Despite trying various approaches, the outcome is always incorrect. <!DOCTYPE html> <html lang="en" ng-app="myApp"> ...

Issue with utilizing MUI Select box within React Hook Form's useFieldArray

I am currently working on a personal project and I could really use your expertise. I find myself struggling to tackle issues efficiently, particularly when it comes to performance. I suspect that my difficulties stem from a lack of understanding in certai ...

The fetch API is being restricted, however, AJAX and XHR are still operational

I made an API call to a URL shortener and encountered different responses using Fetch, JQuery, and XHR. Why is Fetch returning a 400 error while the other methods work smoothly? Even after trying mode: 'no-cors' and "crossDomain": true in the re ...