Material-UI 自定义主题调色板属性在 Jest 中产生“未定义”错误答案

【问题标题】：Material-UI custom theme palette property yielding 'undefined' error in JestMaterial-UI 自定义主题调色板属性在 Jest 中产生“未定义”错误
【发布时间】：2021-07-24 07:29:09
【问题描述】：

简而言之，我正在使用 Jest、React 测试库和 Material UI createMuiTheme，除了测试之外一切正常。只有当我从createMuiTheme 的复合主题中添加自定义主题时，它们才会中断。

我正在为我的 MUI 项目创建一个自定义主题，如下所示：

import { createMuiTheme } from '@material-ui/core/styles';

export const theme = {
  palette: {
    extra: {
      activeButton: '#D4564E',
      black: '#000000',
      darkGrey: '#232323',
      rgbaInvisible: 'rgba(0, 0, 0, 0)',
      success: '#4CAF50',
      white: '#FFFFFF',
    },
  },
};

export default createMuiTheme(theme);

我的组件样式在 JSS 中是这样定义的：

const useStyles = makeStyles((theme) => {
  return {
    ctaCopy: {
      color: theme.extraColors.activeButton,
    },
  };
});

组件本身我认为不重要，但它看起来像这样：

<Link className={classes.ctaCopy} href={ctaUrl}>
  {ctaCopy}
</Link>

这行得通。组件在渲染时以预期的颜色正确显示。但是，当我在 Jest 测试中使用这个组件时，它失败了，说：

TypeError: Cannot read property 'activeButton' of undefined

更新：

我进一步挖掘并尝试了其他一些解决方案，包括使用MuiThemeProvider 和ThemeProvider（当然是分开的）。为了做到这一点，我使用import 来引入我的自定义主题，该主题托管在外部库中。如下：

import { defaultTheme } from 'my-external-lib';

这同样适用于渲染页面。我甚至去了console.logdefaultTheme，它再次在渲染页面中正确打印。但是，在测试中，如果我console.log(defaultTheme) 结果是未定义的！！

也许更新后的细微差别是，为什么我不能以这种方式将 import 与 Jest/React 测试库一起使用？

这可能需要发布一个全新的问题。

到目前为止我尝试过的更多内容：

// This theme created as above
import { ThemeProvider } from '@material-ui/core';
import { defaultTheme } from '@my-external-lib';
import MyComponent from './MyComponent';

const setupComponent = ({
  ctaCopy,
  ctaUrl,
} = {}) => {
  render(
    <ThemeProvider theme={defaultTheme}>
      <MyComponent
        ctaCopy={ctaCopy}
        ctaUrl={ctaUrl}
      />
    </ThemeProvider>,
  );
};

const testCtaCopy = 'test-cta-copy';
const testCtaUrl = 'https://www.test.com';

describe('My component', () => {
  it('should render', () => {
    expect.assertions(1);

    setupComponent({ ctaCopy: testCtaCopy, ctaUrl: testCtaUrl });

    expect(screen.getByText(testCtaCopy)).toBeInTheDocument();
  });
});

为什么我在仅测试中收到此错误？

【问题讨论】：

您是否在使用这些库？ “@testing-library/jest-dom”、“@testing-library/react”、“@testing-library/user-event”。渲染功能是来自测试库还是来自反应？我有类似的测试环境，它对我有用。
您好，想看看这方面有没有更新？我也有同样的问题。

标签： jestjs material-ui react-testing-library

【解决方案1】：

老实说，我对 JS、React 和 Jest 还很陌生，但我能够解决一个类似的问题，即我遇到了类似的错误（与新的 MUI v5 更新有关），所以这是我的最佳猜测：

也许您在测试时收到错误，而不是在运行 src 时收到错误，因为：

您的测试和源代码的范围不同。 src 代码了解主题是如何在所有不同的 src 代码文件中传递和使用的。或者：
您的测试代码正在做出编译器不关心的断言。

TypeError: Cannot read property 'activeButton' of undefined，听起来好像你的主题没有被 makestyles() 正确拾取和使用。（虽然看起来您完全遵循了文档并显示了您的主题，所以我猜这是 JEST 方面的一个问题或 MUI 的一个小错误）

我修复类似错误的方法是将我的主题移动到与我的 JSS 相同的文件中，并直接在 makeStyles() 中引用我的主题，而不是将 theme 作为参数传递。

比如：


const themeAttr = {
  palette: {
    extra: {
      activeButton: '#D4564E',
      black: '#000000',
      darkGrey: '#232323',
      rgbaInvisible: 'rgba(0, 0, 0, 0)',
      success: '#4CAF50',
      white: '#FFFFFF',
    },
  },
}; 

const theme = createMuiTheme(themeAttr);

const useStyles = makeStyles( => {
  return {
    ctaCopy: {
      color: theme.extraColors.activeButton,
    },
  };
});

我没有在我的项目中使用createMUITheme。我只使用了createTheme()。但是，这确实解决了我在测试期间收到的错误，所以我希望这会有所帮助！

【讨论】：