Question

我正在尝试使用带有Material UI样式的组件以及React Testing Library + Jest来运行我的测试。尽管测试通过了，但它正在控制台上引发有关withStyles（）的警告。有什么想法吗？

ComponentCheck

import React from 'react';
                import {
                  Drawer,
                  Grid,
                  withStyles

            } from '@material-ui/core';
            import { styles } from './ComponentCheck.css';

            class ComponentCheck extends React.Component {
              constructor(props) {
                super(props);
              }
              render() {
                const { t, openProposalAssistant, classes, drawer, auth } = this.props;
                const { proposalAssistantDrawerOpen } = drawer;
                const customProps = _.omit(this.props, 'classes');
                return (
                  <div className={classes.root}>
                    <div className={classes.container}>
                      <Drawer anchor="right" open={proposalAssistantDrawerOpen} variant="temporary">
                       <Grid item xs={12} className={classes.optionCards}>TEST</Grid>
                      </Drawer>
                    </div>
                  </div>
                 );
               }
            }
            export default withStyles(styles)(ComponentCheck);

ComponentCheck.css.js

export const styles = theme => ({
  root: {
    display: 'flex',
    width: '100%',
    height: '100%',
    flexDirection: 'row',
    backgroundColor: '#eceff1'
  },

  rootImport: {
    width: '100%',
    overflowX: 'auto',
    borderRadius: 0
  },

  content: {
    flex: '1 0 auto'
  },

  progress: {
    color: theme.palette.mainaccent,
    animationDuration: '550ms'
  },

  progressPos: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center'
  }
}

ComponentCheckTest组件

    import React from 'react';
    import { cleanup, fireEvent } from '@testing-library/react';
    import '@testing-library/jest-dom/extend-expect';
    import i18next from '../../../../config/i18next';
    import componentTest from '../../../../../__mocks__/componentTest'; // Component Mock Function
    import user from '../../../../../__mocks__/models/user';
    import ComponentCheck from '../ComponentCheck';
    import { styles } from '../ComponentCheck.css';

    describe('Proposal', () => {
      afterEach(cleanup);
      const props = {};
      it('It is rendering Component', async () => {
        const { asFragment } = componentTest(ComponentCheck, route, { props, styles: styles 
      });
        expect(asFragment).toMatchSnapshot();
      });
    });

ComponentTest

import React from 'react';
    import { Provider } from 'react-redux';
    import { render } from '@testing-library/react';
    import { MemoryRouter, Route } from 'react-router';
    import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
    import configureStore from '../src/store/configureStore';
    import muiTheme from '../src/config/muiTheme';

    const store = configureStore();

    const componentTest = (Component, route, props) => {
      if (route) {
        return render(
          <Provider store={store}>
            <MemoryRouter initialEntries={[route]}>
              <Route path={route}>
                <MuiThemeProvider theme={muiTheme}>
                  <Component {...props} />
                </MuiThemeProvider>
              </Route>
            </MemoryRouter>
          </Provider>
        );
      }
      return render(
        <Provider store={store}>
          <MuiThemeProvider theme={muiTheme}>
            <Component {...props} />
          </MuiThemeProvider>
        </Provider>
      );
    };

    export default componentTest;

警告是这样的

警告：Material-UI：提供给withStyles（）的第一个参数无效。您需要提供一个生成样式的函数或一个样式对象。

Answer 1

我看到的主要问题是ComponentCheck.css应该重命名为js文件（例如ComponentCheckCss.js，然后使用import { styles } from '../ComponentCheckCss';导入）。

.css扩展名将导致webpack对文件（包含JavaScript-不 CSS）进行不恰当的解析（至少使用典型配置），我怀疑{根据您目前的使用方式，{1}}变量为styles。

具有样式的材质UI withStyles与反应测试库抛出警告

1 个答案: