Блог

Главная - Вопросы по программированию - Ошибка типа: Utils не является конструктором

Ошибка типа: Utils не является конструктором

#unit-testing #jestjs #datetimepicker #date-fns #muipickersutilsprovider

#модульное тестирование #jestjs #указатель даты и времени #дата -fns #muipickersutilsprovider #datetimepicker #дата-fns

Вопрос:

Я использую MuiPickersUtilsProvider из @material-ui/pickers@ v-3.2.10

и использование подобных:

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

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

Он работает в пользовательском интерфейсе, но при запуске тестового примера выдает ошибку следующим образом:

Ошибка типа: Utils не является конструктором

Но как только я использую import * as DateFnsUtils from '@date-io/date-fns' наш тестовый пример работает, но в пользовательском интерфейсе появляется та же ошибка,

И когда я использую import {default as DateFnsUtils} from '@date-io/date-fns' наш тестовый пример работает, но одна и та же ошибка возникает в обоих местах (пользовательский интерфейс и тестовый пример)

Я нашел аналогичное обсуждение по ссылке ниже, но без помощи

материал-ui-сборщики /проблемы /805

 // 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})
}

Комментарии:

1. Вы также используете Typescript для построения кода?

2. Можете ли вы также поделиться своей конфигурацией jest?

3. добавлены конфигурации @tmhao2005

4. да, я использую Typescript

5. Нет. Я имел в виду конфигурацию jest, чтобы узнать, как вы преобразуете свой код в jest.

Ответ №1:

У меня возникла та же проблема, и я решил ее следующим кодом,

 "<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>
    )
}

Ответ №2:

Я получил эту ошибку при использовании LocalizationProvider для того, чтобы использовать DatePicker компонент mui. В моем случае проблема была связана с опечаткой в dateAdapter prop. Я прошел dataAdapter={AdapterDateFns} вместо dateAdapter={AdapterDateFns} . Проблема решена после исправления опечатки:

 import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';

export default function App() {

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
        <Main />
    </LocalizationProvider>
  );
}