类型：utils不是构造函数

Question

我正在使用

MuiPickersUtilsProvider

使用类似的后面：@material-ui/pickers@它在UI上工作，但是在运行测试案例时，它会引发错误如下：

类型：utils不是构造函数

，但是一旦我使用

v-3.2.10

我们的测试案例起作用，但在UI上出现同样的错误，

当我使用

import DateFnsUtils from '@date-io/date-fns'
import { DateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers'

<MuiPickersUtilsProvider utils={DateFnsUtils}>
                <DateTimePicker .../>
</MuiPickersUtilsProvider>

时，我们的测试案例有效，但同样的错误在位置（UI和测试用例）

我在下面的链接上发现了类似的讨论，但没有帮助

物质 - UI挑选/问题/805

import * as DateFnsUtils from '@date-io/date-fns'

我遇到了同样的问题，我通过以下代码解决了解决， import {default as DateFnsUtils} from '@date-io/date-fns'

Answer 1

// setup file
var enzyme = require('enzyme');
var Adapter = require('enzyme-adapter-react-16');
require('jest-canvas-mock')
enzyme.configure({ adapter: new Adapter() });

crypto = require('@trust/webcrypto')

// fetch undefined
const fetchPolifill = require('whatwg-fetch')
global.fetch = fetchPolifill.fetch
global.Request = fetchPolifill.Request
global.Headers = fetchPolifill.Headers
global.Response = fetchPolifill.Response

function noOp () { }
if (typeof window.URL.createObjectURL === 'undefined') {
  Object.defineProperty(window.URL, 'createObjectURL', { value: noOp})
}

使用

Mui

的组件时，我会遇到此错误。
就我而言，问题与

"<MuiPickersUtilsProvider utils={DateFnsUtils}>"


import React, { useState } from 'react'
import DateFnsUtils from '@date-io/date-fns';
import { MuiPickersUtilsProvider, KeyboardDatePicker } from '@material-ui/pickers';

const ProblemStatement = () => {
 const [selectedDate, setSelectedDate] = useState(new Date('2014-08-18T21:11:54'))
    const handleDateChange = (date) => {
        setSelectedDate(date)
    }
    return (
        <div>
            ProblemStatement
            <h2>datepicker</h2>
            //this one
            <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <KeyboardDatePicker
                    margin="normal"
                    id="date-picker-dialog"
                    label="Date picker dialog"
                    format="MM/dd/yyyy"
                    value={selectedDate}
                    onChange={handleDateChange}
                    KeyboardButtonProps={{
                        'aria-label': 'change date',
                    }}
                />
            </MuiPickersUtilsProvider>


        </div>
    )
}

Answer 2

LocalizationProvider

而不是

DatePicker

。解决错字后解决了问题：dateAdapter