JEST परीक्षण मेंComComededStyle () क्रोम / फ़ायरफ़ॉक्स DevTools में गणना की गई शैलियों के लिए अलग-अलग परिणाम क्यों देता है

Question

मैंने सामग्री-यूआईMyStyledButton पर आधारित एक कस्टम बटन ( ) लिखा है । Button

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;

यह एक विषय का उपयोग करके स्टाइल किया गया है और यह backgroundColorपीले रंग की एक छाया निर्दिष्ट करता है (विशेष रूप से #fbb900)

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

export const myYellow = "#FBB900";

export const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      containedPrimary: {
        color: "black",
        backgroundColor: myYellow
      }
    }
  }
});

घटक को मेरे मुख्य में त्वरित किया जाता है index.jsऔर अंदर लपेटा जाता है theme।

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

यदि मैं क्रोम DevTools में बटन की जांच करता हूं तो background-colorउम्मीद के मुताबिक "गणना" है। फ़ायरफ़ॉक्स DevTools में भी यही स्थिति है।

हालाँकि जब मैं जाँच करने के लिए एक JEST परीक्षण लिखता हूँ background-colorऔर मैं DOM नोड शैली को क्वेरी करता हूँ, तो बटन का उपयोग करके getComputedStyles()मैं transparentवापस आ जाता हूँ और परीक्षण विफल हो जाता है।

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);

मैंने सटीक समस्या के साथ कोडस्बैंडबॉक्स, पुन: पेश करने के लिए न्यूनतम कोड और असफल जेईएसटी टेस्ट शामिल किया है।

Comments

.MuiButtonBase-root-33 पृष्ठभूमि-रंग पारदर्शी है, जबकि .MuiButton-निहित- Primary-13 नहीं है - तो समस्या यह है, CSS में कक्षाएं समान रूप से महत्वपूर्ण हैं, इसलिए केवल लोड ऑर्डर उन्हें अलग करता है -> परीक्षण शैलियों में गलत क्रम में लोड किया जाता है।

— ज्येदनर

@Andreas - अनुरोध के अनुसार अपडेट किया गया

— साइमन लांग

@Zyndar - हां, मुझे पता है। क्या इस परीक्षा को पास करने का कोई तरीका है?

— साइमन लांग

themeपरीक्षण में उपयोग करने की आवश्यकता नहीं होगी? के रूप में, लपेट <MyStyledButton>में <MuiThemeProvider theme={theme}>? या सभी घटकों के लिए विषय को जोड़ने के लिए कुछ रैपर फ़ंक्शन का उपयोग करें?

— ब्रेट डीडूडी

नहीं, इससे कोई फर्क नहीं पड़ता।

— शमौन लांग

Answer 1

मैं करीब आ गया हूँ, लेकिन अभी तक एक समाधान पर नहीं।

मुख्य मुद्दा यह है कि MUIButton शैलियों को शक्ति देने के लिए तत्व को एक टैग इंजेक्ट करता है। यह आपके इकाई परीक्षण में नहीं हो रहा है। मैं इसे बनाने के लिए काम करने में सक्षम था CreateMount का उपयोग करके कि सामग्री परीक्षण का उपयोग करें।

इस फिक्स के बाद, शैली सही ढंग से दिखाई दे रही है। हालाँकि, गणना की गई शैली अभी भी काम नहीं करती है। ऐसा लगता है कि अन्य लोगों ने इसे सही ढंग से संभालने वाले एंजाइम के मुद्दों में भाग लिया है - इसलिए मुझे यकीन नहीं है कि यह संभव है।

जहां मैं था, वहां जाने के लिए, अपना परीक्षण स्निपेट लें, इसे शीर्ष पर कॉपी करें, और फिर अपना परीक्षण कोड बदलें:

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;
}