Jest could not parse CSS stylesheet

I am trying to test a custom component which i have developed using material ui and typescript. The test returns the error:

    Error: Could not parse CSS stylesheet
        at exports.createStylesheet (C:\Users\Sujith\kodepi-d2reports\documentation2\front-end-web\node_modules\jsdom\lib\jsdom\living\helpers\stylesheets.js:34:21)
        at HTMLStyleElementImpl._updateAStyleBlock (C:\Users\Sujith\kodepi-d2reports\documentation2\front-end-web\node_modules\jsdom\lib\jsdom\living\nodes\HTMLStyleElement-impl.js:68:5)
        at HTMLStyleElementImpl._childTextContentChangeSteps (C:\Users\Sujith\kodepi-d2reports\documentation2\front-end-web\node_modules\jsdom\lib\jsdom\living\nodes\HTMLStyleElement-impl.js:36:12)
        at HTMLStyleElementImpl._insert (C:\Users\Sujith\kodepi-d2reports\documentation2\front-end-web\node_modules\jsdom\lib\jsdom\living\nodes\Node-impl.js:832:14)
        at HTMLStyleElementImpl._preInsert (C:\Users\Sujith\kodepi-d2reports\documentation2\front-end-web\node_modules\jsdom\lib\jsdom\living\nodes\Node-impl.js:768:10)
        at HTMLStyleElementImpl._append (C:\Users\Sujith\kodepi-d2reports\documentation2\front-end-web\node_modules\jsdom\lib\jsdom\living\nodes\Node-impl.js:868:17)
        at HTMLStyleElementImpl.appendChild (C:\Users\Sujith\kodepi-d2reports\documentation2\front-end-web\node_modules\jsdom\lib\jsdom\living\nodes\Node-impl.js:610:17)
        at HTMLStyleElement.appendChild (C:\Users\Sujith\kodepi-d2reports\documentation2\front-end-web\node_modules\jsdom\lib\jsdom\living\generated\Node.js:395:60)
        at styleInject (C:\Users\Sujith\kodepi-d2reports\documentation2\front-end-web\node_modules\@repolens\library\node_modules\style-inject\dist\style-inject.es.js:24:11)
        at Object.<anonymous> (C:\Users\Sujith\kodepi-d2reports\documentation2\front-end-web\node_modules\@repolens\library\build\index.js:185:1) /**********************************************************/
    /*****Base SCSS******/
    /**********************************************************/
    @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap");
    @import url("https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp");
    @import url(react-date-range/dist/styles.css);
    @import url(react-date-range/dist/theme/default.css);
    @import url(react-date-range/dist/styles.css);
    @import url(react-date-range/dist/theme/default.css);
    body {
      font-family: 'Open Sans';
      margin: 0px;
      padding: 0px;
      background-color: #ececec; }
    
    .main_menu__3xH_i::-webkit-scrollbar {
      width: 2px;
      background: transparent; }
    
    .main_menu__3xH_i::-webkit-scrollbar-track {
      background: transparent; }
    
    .main_menu__3xH_i::-webkit-scrollbar-thumb {
      background: #c2c2c2; }
    
    .main_menu__3xH_i::-webkit-scrollbar-thumb:hover {
      background: #9f9f9f; }
    
    .main_menu__3xH_i::-webkit-scrollbar-track-piece {
      display: none; }
    
    @media print {
      body {
        counter-reset: page; }
      @page {
        size: A4;
        margin: 0px 45px;
        counter-increment: page;
        @bottom-center {
          content: counter(page); } }
      #main_wrapper__3zX5W {
        position: relative; }
      #main_frontpage__1iHAV,
      #main_table-contents__2UTz3 {
        position: relative;
        height: calc(100vh - 50px);
        background-color: white;
        z-index: 9999999; }
      #main_table-contents__2UTz3 {
        top: 90px; }
      #main_table-contents__2UTz3 h3 {
        font-size: 25px;
        font-weight: bold; }
      #main_table-contents__2UTz3 ol {
        margin-top: 15px;
        margin-left: 20px;
        padding: 0; }
      #main_table-contents__2UTz3 ol li {
        margin-bottom: 10px;
        font-size: 14px; }
      #main_frontpage__1iHAV {
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        justify-items: center; }
      #main_frontpage-content__3Wipr {
        align-self: center;
        display: flex;
        flex-direction: column;
        justify-content: center; }
      #main_frontpage-content__3Wipr img {
        height: 50px; }
      #main_frontpage-content__3Wipr p {
        font-size: 28px; }
      #main_content__2Ez4G {
        position: relative; } }
    
    @keyframes main_fadeIn__1dNSG {
      0% {
        opacity: 0; }
      100% {
        opacity: 1; } }
    
    @keyframes main_fadeOut__29uZr {
      0% {
        opacity: 1; }
      100% {
        opacity: 0; } }
    
    .main_menu__3xH_i::-webkit-scrollbar {
      width: 5px;
      background: #c2c2c2 !important; }
    
    .main_menu__3xH_i::-webkit-scrollbar-track {
      background: transparent;
      display: none; }
    
    .main_menu__3xH_i::-webkit-scrollbar-thumb {
      background: #C2C2C2 !important;
      border-radius: 5px; }
    
    .main_menu__3xH_i::-webkit-scrollbar-thumb:hover {
      background: #c2c2c2 !important; }
    
    /**********************************************************/
    /*****Left Navbar SCSS******/
    /**********************************************************/
    .main_navbar-root__SrA8L {
      font-family: 'Open Sans'; }
    
    /**********************************************************/
    /*****Footer SCSS******/
    /**********************************************************/
    .main_social__K7Xad:hover {
      transform: scale(1.2); }

I am using react testing library for testing and my test script looks like this:

"test": "jest --coverage"

Other than the console error the test cases are passing. What should i do to correct the console error?

PS: This issue was not present when using material ui/core version 4.11.3, and occurred after migrating to 4.12.1.