基于antd 进行二次封装的组件,
import React, { forwardRef, Ref, useImperativeHandle, useState } from 'react';
import { DatePicker, ConfigProvider } from 'antd';
import 'moment/locale/zh-cn';
import zhCN from 'antd/es/date-picker/locale/zh_CN';
import enUS from 'antd/es/date-picker/locale/en_US';
import moment from 'moment';
import './index.css';
export interface SelectTimeProps {
startDate: string;
endDate: string;
name: string | undefined;
}
interface DatePcikersProps {
labelText?: string;
name?: string;
handleChange: (date: SelectTimeProps) => void;
[key: string]: any;
}
type Props = DatePcikersProps;
interface RefObject {
changeLanguage: () => void;
}
const { RangePicker } = DatePicker;
const AntdPickers = forwardRef((props: Props, ref: Ref<RefObject>) => {
const [local, setLocal] = useState(zhCN);
const { labelText, name, handleChange, ...resetProps } = props;
useImperativeHandle(ref, () => ({
changeLanguage,
}));
const changeDate = (values: any, dateStrings: string[]) => {
// const selectDate = {
// startDate: moment(dateStrings[0]).valueOf() || 0,
// endDate: moment(`${dateStrings[1]} 23:59:59:999`).valueOf() || 0,
// name: props.name
// }
const selectDate = {
startDate: dateStrings[0],
endDate: dateStrings[1],
name: name,
};
handleChange(selectDate);
};
const disabledDate = (current: any) => {
return current && current >= moment();
};
const changeLanguage = () => {
setLocal(local === zhCN ? enUS : zhCN);
// moment.locale('zh-cn');
};
return (
<ConfigProvider
getPopupContainer={(node) => {
if (node) {
return node.parentNode as HTMLElement;
}
return document.body;
}}
>
<span>{labelText ? labelText + ' : ' : ''}</span>
<RangePicker
locale={local}
onChange={changeDate}
disabledDate={disabledDate}
{...resetProps}
/>
</ConfigProvider>
);
});
export default AntdPickers;
jest.config.js文件代码
module.exports = {
setupFilesAfterEnv: ['<rootDir>/testSetUp.js'],
testEnvironment: 'jsdom', // default: jsdom, 可配置: node
"transformIgnorePatterns": [
"/node_modules/(?!antd|@ant-design|rc-.+?|@babel/runtime).+(js|jsx)$",
]
};
运行yarn test 报错
增加 .babelrc.js文件
module.exports = {
presets: ['@babel/env', '@babel/typescript', '@babel/react'],
// presets: ["@babel/react", "es2015", "stage-1"],
plugins: [
'@babel/plugin-transform-runtime',
'@babel/proposal-class-properties',
],
env: {
test: {
plugins: [
['babel-plugin-transform-require-ignore',
{
extensions: ['.less', '.scss', '.css'],
},
],
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
},
esm: {
presets: [
[
'@babel/env',
{
modules: false,
},
],
],
plugins: [
[
'@babel/plugin-transform-runtime',
{
useESModules: true,
},
]
],
},
},
};
报错 .ant-picker 报错非法字符
应该是babelrc 和jest.config 配置问题, 但是实验多次还是报错, 请教大佬们!! 感谢!!