Add example test configuration for react-scripts to samples\react-app

[elav000]

Describe the bug While the example itself works just fine, if you try to add a test that pulls in any resource from @microsoft/mgt it will fail. I am trying to setup something similar in a create react app and am having some difficulty figuring out how to get jest setup properly with create-react-app and @microsoft/mgt.

It is probably related to issue 110, but having a documented set of guidelines for consumers of @microsoft/mgt inside the project would be helpful. Otherwise, each project will need to go figure out how to integrate the library into their own package and testing framework.

To Reproduce Steps to reproduce the behavior:

1. Clone the repo
2. Navigate to samples\react-app
3. yarn
4. Add a file in src\__tests__ called index.test.js with the following contents:

   
   import { PersonViewType } from '@microsoft/mgt';

it('PersonViewType oneline should be three', () => { expect(PersonViewType.oneline).toEqual(3); });

5. run `yarn test --watchAll=false` from the terminal

**Expected behavior**
Test should succeed

**Screenshots**
It is notable that in this create-react-app only JavaScript is used, but the resolved/referenced decorator is a ts file.

Here is the output from running `yarn test --watchAll=false` :
```sh
PS C:\Users\Evan\source\repos\microsoft-graph-toolkit\samples\react-app> yarn test --watchAll=false
yarn run v1.22.4
$ react-scripts test --watchAll=false
 FAIL  src/__tests__/index.test.js
  ● Test suite failed to run

    TypeError: Cannot read property 'define' of undefined

    > 1 | import { PersonViewType } from '@microsoft/mgt';
        | ^
      2 |
      3 | it('PersonViewType oneline should be three', () => {
      4 |   expect(PersonViewType.oneline).toEqual(3);

      at legacyCustomElement (node_modules/lit-element/src/lib/decorators.ts:51:29)
      at node_modules/lit-element/src/lib/decorators.ts:91:5
      at Object.<anonymous>.__decorate (node_modules/@microsoft/mgt/dist/es6/components/sub-components/mgt-flyout/mgt-flyout.js:26:220)
      at Object.<anonymous> (node_modules/@microsoft/mgt/src/components/sub-components/mgt-flyout/mgt-flyout.ts:21:23)
      at Object.<anonymous> (node_modules/@microsoft/mgt/src/components/mgt-person/mgt-person.ts:22:1)
      at Object.<anonymous> (node_modules/@microsoft/mgt/src/components/mgt-agenda/mgt-agenda.ts:15:1)
      at Object.<anonymous> (node_modules/@microsoft/mgt/src/components/components.ts:8:1)
      at Object.<anonymous> (node_modules/@microsoft/mgt/src/index.ts:8:1)
      at Object.<anonymous> (src/__tests__/index.test.js:1:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.447s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Environment (please complete the following information):

• OS: Windows 10
• Framework: ReactJS, create-react-app, react-scripts

[ghost]

Hello elav000, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[shweaver-MSFT]

Hi @elav000, thanks for submitting this. As you have seen, our testing setup in the toolkit leaves some to be desired... I agree that we should offer some testing examples :)

There are some jest tests for Mgt, but they are very stale. We should see if we can get jest working in the main project, as well as in a sample app 👍

[elav000]

Thanks @shweaver-MSFT! It's greatly appreciated.

[NickersWeb]

Also experiencing this issue in my jest tests. How can I test my code while also including this package?

    TypeError: Cannot read property 'define' of undefined

      2 | import { AuthContext as AuthContextData } from './AuthContext';
      3 |
    > 4 | import { Providers, ProviderState } from '@microsoft/mgt-element';
        | ^
      5 | import { Msal2Provider, Msal2Config, Msal2PublicClientApplicationConfig } from '@microsoft/mgt-msal2-provider';
      6 |

[sebastienlevert]

Adding @gavinbarron around this topic. Is this doable and is easier with the new v3 release?

[gavinbarron]

I think that it's about the same level of complexity between v2 and v3 TBH, that said, as we have some working Jest tests in v3 for mgt-components it should be reasonably straightforward to port that approach into the react-contoso sample app

[sebastienlevert]

At the moment, this is not something we're likely to prioritize. That being said, the Graph Toolkit is an open source project and we'll be happy to support and review if you want to contribute to its codebase! In the meantime, we will be closing this issue. Thanks!