Reactjs 使用withStyles（物料ui）对组件进行单元测试时，React钩子无效

我试图对使用MaterialUI中的样式的组件进行单元测试。我正在定义下面的样式

import { makeStyles, Theme, createStyles } from "@material-ui/core";

const myStyle = (theme: Theme) => createStyles({
    root: {
        display: 'flex'
    },
    content: {
        flexGrow: 1,
        backgroundColor: theme.palette.background.default,
        padding: theme.spacing(3)
    },
    drawer: {
        width: 240
    }
});

export function useStyles() {
    return makeStyles(myStyle);
}

它由一个名为MainPage的组件使用，如下所示

export const MainPage = () => {
    const classes = useStyles();

    return (
        <ErrorBoundary>
            <DynamicFormWrapper
                baseUrl={'https://.......'}
                classes={classes()}
            />
        </ErrorBoundary>
    );
};

export const MainPage=（）=>{
const classes=useStyles（）；
返回(
);
};

我在树的下面有一个组件，它依赖于这样的样式

type FormProps = {
    names: string[];
} & WithStyles;

export class SideMenu extends React.Component<FormProps> {
    private names: string[];

    constructor(props) {
        super(props);

        this.names= props.names;
    }

    render() {
        //omitted
    }
}

import * as React from 'react';
import { configure, shallow } from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';
import { SideMenu } from '../src/components/SideMenu';
import { useStyles } from '../src/js/styles'

configure({ adapter: new Adapter() });

describe('SideMenu', () => {
    let wrapper;

    beforeEach(() => {
        const style = useStyles();
        wrapper = shallow(<SideMenu names={['test1', 'test2', 'test3']} classes={style()} />);
    });

    it('Should render', () => {
        expect(wrapper)
    });
});

type FormProps={
名称：字符串[]；
}&风格；
导出类侧菜单扩展了React.Component{
私有名称：字符串[]；
建造师（道具）{
超级（道具）；
this.names=props.names；
}
render（）{
//省略
}
}

当尝试测试该组件时，我需要将样式作为道具传入，我正尝试这样做

type FormProps = {
    names: string[];
} & WithStyles;

export class SideMenu extends React.Component<FormProps> {
    private names: string[];

    constructor(props) {
        super(props);

        this.names= props.names;
    }

    render() {
        //omitted
    }
}

import * as React from 'react';
import { configure, shallow } from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';
import { SideMenu } from '../src/components/SideMenu';
import { useStyles } from '../src/js/styles'

configure({ adapter: new Adapter() });

describe('SideMenu', () => {
    let wrapper;

    beforeEach(() => {
        const style = useStyles();
        wrapper = shallow(<SideMenu names={['test1', 'test2', 'test3']} classes={style()} />);
    });

    it('Should render', () => {
        expect(wrapper)
    });
});

import*as React from'React'；
从“酶”导入{configure，shallow}；
从'enzyme-Adapter-react-16'导入*作为适配器；
从“../src/components/SideMenu”导入{SideMenu}；
从“../src/js/styles”导入{useStyles}
配置（{adapter:newadapter（）}）；
描述（'侧菜单'，（）=>{
让包装纸；
在每个之前（（）=>{
const style=useStyles（）；
包装器=浅（）；
});
它（'应该呈现'，（）=>{
expect（包装器）
});
});

运行测试时，这将抛出一个无效的钩子错误

 Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following yada yada

      16 |     beforeEach(() => {
      17 |         const style = useStyles();
    > 18 |         wrapper = shallow(<SideMenu names={['test1', 'test2', 'test3']} classes={style()} />);
         |                                                                                  ^ 
      19 |     });
      20 |
      21 |      it('Should render', () => {

无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能发生在以下情况之一：yada yada
16 |每个之前（（）=>{
17 |常量样式=使用样式（）；
>18 |包装=浅（）；
|                                                                                  ^ 
19 |     });
20 |
21 |它（'应该呈现'，（）=>{

---

当我用普通组件遇到它们时，我能够修复这些问题，但在这样的单元测试中似乎无法解决。有什么想法吗？

尝试将

classes={style（）}

更改为

classes={style}

。我已经尝试过了，它会让typescript对下面的编译错误感到愤怒。Type'（props？：Any）=>记录“”不可分配给类型“记录”。类型“”中缺少索引签名（道具？：任何）=>Record。我曾尝试过显式键入东西，但运气不太好。现在我正在解决这个问题：在我的测试类上重新创建样式，但不希望不必要地重复代码。什么是

Record

？Record是typescript中的一种类型，它不是我创建的。