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

Question

简而言之，我正在使用 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.log了defaultTheme并且它再次在呈现的页面中正确打印。但是，在测试中，如果我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();
  });
});

为什么我只在测试中收到这个错误？

Answer 1

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

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

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

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(). 不过，这确实修复了我在测试期间收到的错误，所以我希望这会有所帮助！