Comparing two different types of values. Expected array but received object

[balzdur]

I've encountered an issue where taking a snapshot diff doesn't produce the expected output. I've outlined a simplistic example to reproduce below:

// component.js

import React from 'react';
import { View } from 'react-native';

const Component = ({withSeparator}) =>
  <>
    <View/>
    {withSeparator ? <View /> : null }
  </>

export default Component;

// component.test.js

import React from 'react';
import renderer from 'react-test-renderer';
import Component from './component';

it('should show separator, () => {
    expect(<Component />).toMatchDiffSnapshot(<Component withSeparator />);
});

// component.test.js.snap

exports[`should show separator 1`] = `
Snapshot Diff:
  Comparing two different types of values. Expected array but received object.
`;

The above error is produced by diffStrings and occured when we compare an array with an object.
In this case, the call is :

difference = diffStrings(print(valueA, identity), print(valueB, identity), ...);

// print(valueA, identity) = { type: 'View', props: {}, children: null }
// print(valueB, identity) = [ { type: 'View', props: {}, children: null },
      { type: 'View', props: {}, children: null } ]

A solution to this issue could be to wrap the object in an array.

[thymikee]

cc @pedrottimark

[michaelmang]

I am also experiencing this issue. It happens whenever you are using snapshotDiff with elements that are fragments.