[BUG] Error executing Jest snapshot test due to dependency mismatch

[vernig]

Description

There is a mismatch between react and react-test-renderer version, and this is known to cause issues.

$ npm list react-test-renderer
[email protected] /Users/twilio/dev/temp/plugin-dependencies
└─┬ [email protected]
  └─┬ [email protected]
    └─┬ [email protected]
      └── [email protected] 

$ npm list react              
[email protected] /Users/twilio/dev/temp/plugin-dependencies
├─┬ @twilio/[email protected]
│ ├─┬ @twilio/[email protected]
│ │ └── [email protected]  deduped
│ └── [email protected]  deduped
└── [email protected] 

Since the version of React cannot be changed, the version of react-test-renderer should be pinned. I tried pinning it down and the test passes.

Versions

package	version
flex-plugin-scripts	4.3.2-beta.0
flex-plugin-test	4.3.1-beta.0
node	12.16.1
npm	6.14.15

Steps to Reproduce

1. Create a new plugin using the CLI plugin: twilio flex:plugins:create plugin-sample
2. Install dependencies
3. Create a new snapshot test using renderer from react-test-renderer, e.g.

// CustomTaskListComponent.spec.jsx

import React from 'react';
import renderer from 'react-test-renderer';

import CustomTaskList from '../CustomTaskList/CustomTaskList';

describe('CustomTaskListComponent', () => {
  it('should render demo component', () => {
    const props = {
      isOpen: true,
      dismissBar: () => undefined,
    };
    const tree = renderer.create(<CustomTaskList {...props} />).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

4. Execute the test: twilio flex:plugins:test

Expected Behavior

Test passes and a new snapshot is created.

Screenshots

The following error is shown:

    TypeError: Cannot read property 'current' of undefined

      22 |       dismissBar: () => undefined,
      23 |     };
    > 24 |     const tree = renderer.create(<CustomTaskList {...props} />).toJSON();
         |                           ^
      25 |     expect(tree).toMatchSnapshot();
      26 |   });
      27 | });

Additional Context

None

[ktalebian]

@vernig is this still an issue with the latest version?

[vernig]

I'll try and get back to you @ktalebian

[vernig]

@ktalebian I can confirm the test now executes correctly:

 PASS  src/components/__tests__/CustomTaskListComponent.spec.jsx
  CustomTaskListComponent
    ✓ should render demo component (13 ms)

 › 1 snapshot written.
Snapshot Summary
 › 1 snapshot written from 1 test suite.

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 written, 1 total
Time:        2.65 s

I still have some unmet peer dependency for react, but it doesn't cause issue for the test

$ npm list react-test-renderer
[email protected] /Users/twilio/dev/temp/plugin-demo
├─┬ [email protected]
│ └─┬ [email protected]
│   ├─┬ [email protected]
│   │ └── [email protected] 
│   └── [email protected] 
└── [email protected] 

$ npm list react 
[email protected] /Users/twilio/dev/temp/plugin-demo
├─┬ @twilio/[email protected]
│ ├─┬ @twilio/[email protected]
│ │ └── UNMET PEER DEPENDENCY [email protected]  deduped
│ └── UNMET PEER DEPENDENCY [email protected]  deduped
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── UNMET PEER DEPENDENCY [email protected]  deduped
│ └── UNMET PEER DEPENDENCY [email protected]  deduped
└── UNMET PEER DEPENDENCY [email protected] 

npm ERR! peer dep missing: react@^16.14.0, required by [email protected]
npm ERR! peer dep missing: react@^16.14.0, required by [email protected]
npm ERR! peer dep missing: react@^16.14.0, required by [email protected]
npm ERR! peer dep missing: react@^16.14.0, required by [email protected]
npm ERR! peer dep missing: react@^16.14.0, required by [email protected]

Versions

package	version
flex-plugin-scripts	4.0.0
flex-plugin-test	4.0.0
node	12.22.1
npm	6.14.12

[ktalebian]

You should have these three packages inside your package.json: react, react-dom and react-test-renderer and all should be the exact same version (so either all are 16.5.2 or all are 16.13.1). If you don't, then please add them and re-run npm install and that should fix your issue.

[vernig]

Thanks @ktalebian, I created this plugin from scratch using twilio flex:plugins:create plugin-sample. So all the dependencies you see above are a result of this command, with no changes on my side.

The issue here is that [email protected] requires [email protected] which in turns requires react@^16.14.0, but the package.json requires [email protected]. And that's the cause of the unmet peer dependencies.

[anjha91]

Hi,

This is a long open item more than a year now, hence closing it. Feel free to reopen it if still required.