Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React Starter Tests Fail #821

Open
calendee opened this issue Jul 4, 2019 · 2 comments

Comments

Projects
None yet
2 participants
@calendee
Copy link
Contributor

commented Jul 4, 2019

Starter Type: react
Starter Template: sidemenu

Description:
When starting a new project, the package.json script test fails with the following output when started with npm run test:

Test Failure # 1

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

    ReferenceError: iosAddSvg is not defined

      1 | import React from 'react';
      2 | import { Redirect, Route } from 'react-router-dom';
    > 3 | import { IonApp, IonPage, IonReactRouter, IonRouterOutlet, IonSplitPane } from '@ionic/react';
        | ^
      4 | import { AppPage } from './declarations';
      5 |
      6 | import Menu from './components/Menu';

      at Object.<anonymous> (node_modules/ionicons/dist/ionicons/svg/index.js:2:8)
      at Object.<anonymous> (node_modules/ionicons/icons/index.js:1:44)
      at Object.<anonymous> (node_modules/@ionic/react/dist/index.js:15:13)
      at Object.<anonymous> (src/App.tsx:3:1)
      at Object.<anonymous> (src/App.test.tsx:3:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.979s
Ran all test suites.

Watch Usage: Press w to show more.

To fix the above problem, you can copy these __mocks__ directory to your project : https://github.com/ionic-team/ionic/tree/master/react/__mocks__

Test Failure # 2

After fixing the above and again running npm run test, you get the following output:

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

    TypeError: Cannot read property 'ios' of undefined

      1 | import React from 'react';
      2 | import { Redirect, Route } from 'react-router-dom';
    > 3 | import { IonApp, IonPage, IonReactRouter, IonRouterOutlet, IonSplitPane } from '@ionic/react';
        | ^
      4 | import { AppPage } from './declarations';
      5 |
      6 | import Menu from './components/Menu';

      at Object.<anonymous> (node_modules/@ionic/react/dist/index.js:1117:30)
      at Object.<anonymous> (src/App.tsx:3:1)
      at Object.<anonymous> (src/App.test.tsx:3:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.108s
Ran all test suites.

Watch Usage: Press w to show more.

You can get past this hurdle by modifying __mocks__/ionicons/icons/index.js with:

module.exports = {
  close: {
    ios: '',
    md: ''
  },
  reorder: {
    ios: '',
    md: ''
  },
  menu: {
    ios: '',
    md: ''
  },
  arrowForward: {
    ios: '',
    md: ''
  },
  arrowBack: {
    ios: '',
    md: ''
  },
  arrowDown: {
    ios: '',
    md: ''
  },
  search: {
    ios: '',
    md: ''
  },
  closeCircle: {
    ios: '',
    md: ''
  },
};

Test Failure # 3:

Now the test fails with:

 FAIL  src/App.test.tsx
  ✕ renders without crashing (10ms)

  ● renders without crashing

    ReferenceError: crypto is not defined

       5 | it('renders without crashing', () => {
       6 |   const div = document.createElement('div');
    >  7 |   ReactDOM.render(<App />, div);
         |            ^
       8 |   ReactDOM.unmountComponentAtNode(div);
       9 | });
      10 |

      at node_modules/@ionic/react/dist/index.js:543:24
          at String.replace (<anonymous>)
      at generateUniqueId$1 (node_modules/@ionic/react/dist/index.js:542:104)

You can solve this problem by :

  1. npm install @trust/webcrypto
  2. Modify App.test.txt as follows:
//@ts-ignore
global.crypto = require('@trust/webcrypto');

Test Passes:

And 💥, your test is finally passing:

 PASS  src/App.test.tsx
  ✓ renders without crashing (43ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.399s, estimated 1s
Ran all test suites.

Watch Usage: Press w to show more.

My ionic info:

➜  ionic info

Ionic:

   Ionic CLI       : 5.2.1 (/Users/jn/.nvm/versions/node/v8.12.0/lib/node_modules/ionic)
   Ionic Framework : @ionic/react 0.0.6

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v8.12.0 (/Users/jn/.nvm/versions/node/v8.12.0/bin/node)
   npm    : 6.4.1
   OS     : macOS Mojave

Other Information:

@csvan

This comment has been minimized.

Copy link

commented Jul 4, 2019

Confirming as of @ionic/react@0.0.6

@calendee

This comment has been minimized.

Copy link
Contributor Author

commented Jul 5, 2019

Here's a working sample project that includes all these changes: https://github.com/calendee/testing-ionic-react

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.