জেএসটি পরীক্ষায় গেটকম্পিউড স্টাইল () কেন ক্রোম / ফায়ারফক্স ডিভুলসগুলিতে গণিত শৈলীতে বিভিন্ন ফলাফল দেয়?

Question

আমি উপাদান- ui এর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
      }
    }
  }
});

কম্পোনেন্ট আমার প্রধান instantiated হয় index.jsএবং আবৃত theme।

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

যদি আমি Chrome DevTools এর বোতামটি পরীক্ষা করি তবে background-colorপ্রত্যাশা অনুযায়ী এটি "গণনা করা"। ফায়ারফক্স ডেভটুলসের ক্ষেত্রেও এটি রয়েছে।

তবে যখন আমি একটি ঠাট্টা পরীক্ষা লিখতে চেক করতে 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

.মুইবাটনবেস-রুট -৩৩ ব্যাকগ্রাউন্ড-কালারটি স্বচ্ছ, যখন। মুই বাটন -যুক্ত প্রাইমারি -13 নয় - তাই সমস্যাটি হল, সিএসএসে ক্লাসগুলি সমান গুরুত্বপূর্ণ, তাই কেবল লোড অর্ডার তাদের পার্থক্য করে -> পরীক্ষার শৈলীতে ভুল ক্রমে লোড করা হয়।

— জেডনার

@ আন্ড্রেয়াস - অনুরোধ অনুসারে আপডেট হয়েছে

— সাইমন লং

@ জিন্দার - হ্যাঁ আমি এটি জানি। এই পরীক্ষাটি পাস করার কোনও উপায় আছে কি?

— সাইমন লং

themeপরীক্ষায় ব্যবহারের দরকার হবে না ? হিসাবে, মোড়ানো <MyStyledButton>মধ্যে <MuiThemeProvider theme={theme}>? বা সমস্ত উপাদানগুলিতে থিম যুক্ত করতে কিছু মোড়ক ফাংশন ব্যবহার করবেন?

— ব্রেট ডিউউডি

না এটি কোনও পার্থক্য করে না।

— সাইমন লং

Answer 1

আমি কাছাকাছি পৌঁছেছি, কিন্তু এখনও একটি সমাধানে না।

মূল সমস্যাটি হ'ল এমইউআইবাটন স্টাইলগুলিকে পাওয়ার করার জন্য উপাদানটিতে একটি ট্যাগ ইনজেক্ট করে। এটি আপনার ইউনিট পরীক্ষায় ঘটছে না। উপাদান পরীক্ষাগুলি যে ক্রিয়েমাউন্ট ব্যবহার করে তা ব্যবহার করে আমি এটি কাজ করতে সক্ষম হয়েছি ।

এই ঠিক করার পরে, শৈলীটি সঠিকভাবে প্রদর্শিত হচ্ছে। তবে, গণিত শৈলী এখনও কাজ করে না। দেখে মনে হচ্ছে অন্যরা এনজাইমগুলি সঠিকভাবে এটি পরিচালনা করে নিয়ে সমস্যা সমাধান করেছে - সুতরাং এটি সম্ভব কিনা আমি নিশ্চিত নই।

আমি যেখানে ছিলাম, আপনার পরীক্ষার স্নিপেট নিন, এটি শীর্ষে অনুলিপি করুন এবং তারপরে আপনার পরীক্ষার কোডটি এতে পরিবর্তন করুন:

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