Jest Unit test is failing for @microsoft/mgt-components even after adding the node_module to transformIgnorePatterns

Question

I am using Microsoft authentication within my App to enable users to login. The flow itself is working seamlessly but the unit test is failing. I have added @microsoft to the transformIgnorePatterns property but seems like it is still not being ignored.

The jest config inside package.json

"jest": {
    "transformIgnorePatterns": [
      "/node_modules/(?!(@microsoft|wc-react|lit-element|lit-html|lit-element)/)"
    ],
    "moduleNameMapper": {
      "^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
    }
  }

Error:

FAIL  src/App.test.js
  ● Test suite failed to run

    TypeError: Cannot read property 'toString' of undefined

      2 | import 'bootstrap/dist/css/bootstrap.min.css';
      3 | import { CustomRoutes } from './components/CustomRoutes';
    > 4 | import { Login } from '@microsoft/mgt-react';
        | ^
      5 | import React, { useState, useEffect } from 'react';
      6 | import { Providers, ProviderState } from '@microsoft/mgt-element';
      7 |

      at Object.<anonymous> (node_modules/@microsoft/mgt-components/dist/es6/styles/src/styles/style-helper.ts:25:31)      at Object.<anonymous> (node_modules/@microsoft/mgt-components/dist/es6/components/mgt-agenda/src/components/mgt-agenda/mgt-agenda.ts:11:1)
      at Object.<anonymous> (node_modules/@microsoft/mgt-components/dist/es6/components/src/components/components.ts:8:1)
      at Object.<anonymous> (node_modules/@microsoft/mgt-components/dist/es6/src/index.ts:8:1)
      at Object.<anonymous> (node_modules/@microsoft/mgt-react/src/index.ts:11:1)
      at Object.<anonymous> (src/App.js:4:1)
      at Object.<anonymous> (src/App.test.js:2:1)

I have tried many work-arounds but nothing worked for me so far. Any help is greatly appreciated.