Javascript 为什么JEST测试中的getComputedStyle（）会向Chrome/Firefox开发工具中的计算样式返回不同的结果

我已经基于材质ui

按钮

编写了一个自定义按钮（

MyStyledButton

）

import React from "react";
import { Button } from "@material-ui/core";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles({
  root: {
    minWidth: 100
  }
});

function MyStyledButton(props) {
  const buttonStyle = useStyles(props);
  const { children, width, ...others } = props;

  return (

      <Button classes={{ root: buttonStyle.root }} {...others}>
        {children}
      </Button>
     );
}

export default MyStyledButton;

该组件在我的main

index.js中实例化，并封装在
主题中

  <MuiThemeProvider theme={theme}>
     <MyStyledButton variant="contained" color="primary">
       Primary Click Me
     </MyStyledButton>
  </MuiThemeProvider>

我已经包含了一个代码沙盒，其中包含了确切的问题、要复制的最少代码以及失败的JEST测试。

我已经接近了，但还没有找到解决方案

主要问题是MUIButton向元素注入了一个标记来支持样式。这不会发生在单元测试中。我能够通过使用材料测试使用的方法来实现这一点

在此修复之后，样式将正确显示。但是，计算样式仍然不起作用。看起来其他人在正确处理这一点上遇到了问题，所以我不确定这是否可能

要了解我所在的位置，请获取测试片段，将其复制到顶部，然后将测试代码更改为：

const myMount = createMount({ strict: true });
  const wrapper = myMount(
    <MuiThemeProvider theme={theme}>
      <MyStyledButton variant="contained" color="primary">
        Primary
      </MyStyledButton>
    </MuiThemeProvider>
  );

constmymount=createMount（{strict:true}）；
常量包装器=myMount(
主要的，重要的
);

类模式扩展了React.Component{
静态类型={
/**
*这本质上是儿童。但是我们不能使用儿童，因为
*如果此组件
*将是根。
*/
__元素：PropTypes.element.isRequired，
__严格：需要PropTypes.bool.isRequired，
};
render（）{
//多余的道具将来自酶制剂等
const{uuuuu元素，uuu严格，…other}=this.props；
const Component=\uuu strict？React.StrictMode:React.Fragment；
返回{React.cloneElement（_元素，其他）}；
}
}
//生成增强的挂载功能。
函数createMount（选项={}）{
const attachTo=document.createElement（'div'）；
attachTo.className='app'；
attachTo.setAttribute（'id'，'app'）；
document.body.insertBefore（附件，document.body.firstChild）；
const mountWithContext=函数mountWithContext（节点，localOptions={}）{
const strict=true；
const disableUnnmount=false；
const localEnzymeOptions={}；
常量globalEnzymeOptions={}；
如果（！disableUnnmount）{
ReactDOM.unmountComponentAtNode（attachTo）；
}
//有些测试要求树中没有其他组件
//例如，在执行.instance（）、.state（）等操作时。
返回装载（strict==null？节点：{
附件:，
…globalEnzymeOptions，
…本地酶选项，
});
};
mountWithContext.attachTo=attachTo；
mountWithContext.cleanUp=（）=>{
ReactDOM.unmountComponentAtNode（attachTo）；
attachTo.parentElement.removeChild（attachTo）；
};
返回上下文；
}
.MuiButton-base-root-33背景色是透明的，而.MuiButton-containedPrimary-13则不是-所以问题是，CSS中的类同样重要，所以测试样式中只有加载顺序区分它们-->加载顺序错误。@Andreas-更新为requested@Zyndar-是的，我知道。有没有办法让这个测试通过？测试中不需要使用
主题
？如中所示，将
包装在
中？或者使用一些包装器功能将主题添加到所有组件中？不，这没有任何区别。我们在这方面有什么进展吗，我也面临着与材质组件相同的问题。
const wrapper = mount(
    <MyStyledButton variant="contained" color="primary">
      Primary
    </MyStyledButton>
  );
  const foundButton = wrapper.find("button");
  expect(foundButton).toHaveLength(1);
  //I want to check the background colour of the button here
  //I've tried getComputedStyle() but it returns 'transparent' instead of #FBB900
  expect(
    window
      .getComputedStyle(foundButton.getDOMNode())
      .getPropertyValue("background-color")
  ).toEqual(myYellow);

const myMount = createMount({ strict: true });
  const wrapper = myMount(
    <MuiThemeProvider theme={theme}>
      <MyStyledButton variant="contained" color="primary">
        Primary
      </MyStyledButton>
    </MuiThemeProvider>
  );

class Mode extends React.Component {
  static propTypes = {
    /**
     * this is essentially children. However we can't use children because then
     * using `wrapper.setProps({ children })` would work differently if this component
     * would be the root.
     */
    __element: PropTypes.element.isRequired,
    __strict: PropTypes.bool.isRequired,
  };

  render() {
    // Excess props will come from e.g. enzyme setProps
    const { __element, __strict, ...other } = this.props;
    const Component = __strict ? React.StrictMode : React.Fragment;

    return <Component>{React.cloneElement(__element, other)}</Component>;
  }
}

// Generate an enhanced mount function.
function createMount(options = {}) {

  const attachTo = document.createElement('div');
  attachTo.className = 'app';
  attachTo.setAttribute('id', 'app');
  document.body.insertBefore(attachTo, document.body.firstChild);

  const mountWithContext = function mountWithContext(node, localOptions = {}) {
    const strict = true;
    const disableUnnmount = false;
    const localEnzymeOptions = {};
    const globalEnzymeOptions = {};

    if (!disableUnnmount) {
      ReactDOM.unmountComponentAtNode(attachTo);
    }

    // some tests require that no other components are in the tree
    // e.g. when doing .instance(), .state() etc.
    return mount(strict == null ? node : <Mode __element={node} __strict={Boolean(strict)} />, {
      attachTo,
      ...globalEnzymeOptions,
      ...localEnzymeOptions,
    });
  };

  mountWithContext.attachTo = attachTo;
  mountWithContext.cleanUp = () => {
    ReactDOM.unmountComponentAtNode(attachTo);
    attachTo.parentElement.removeChild(attachTo);
  };

  return mountWithContext;
}