Unexpected duplicate nested components

[andriichernenko]

When I mount() some components, they end up having nested duplicates.

For example,

import React from 'react';
import {
	View,
	Text,
	TouchableOpacity,
	ActivityIndicator,
} from 'react-native';

import { mount } from 'enzyme';

describe('component', () => {
	it('renders', () => {
		console.log(mount(<View />).debug());
	});
});

Here's what I see in the log:

  console.log /__tests__/test.js:44
    <View>
      <View />
    </View>

I see this behavior with View, Text, ActivityIndicator, but not with TouchableOpacity or custom components. Finding components becomes much more complicated.

What might be going on here? Is this behavior expected or is it a bug?

[bob-carson]

Sorry to hear that you are having trouble @andriichernenko. I tried running your code and got a different result. Rather than a nested View I got a nested component with the name react-native-mock. This is expected with the current implementation.

I also tried running the same code for TouchableOpacity and received a similar result to the one I received for View. Below is the code I ran and the result I got.

Code:

import React from 'react';
import { View, TouchableOpacity } from 'react-native';
import { mount } from 'enzyme';

describe('View', () => {
  it('renders', () => {
    console.log('\nView\n');
    console.log(mount(<View />).debug());
    console.log('\nTouchableOpacity\n');
    console.log(mount(<TouchableOpacity />).debug());
  });
});

Console Output:

View

<View>
  <react-native-mock />
</View>

TouchableOpacity

<TouchableOpacity>
  <react-native-mock />
</TouchableOpacity>

If the structure of the the mocked views is causing trouble for you, I'm happy to explore mocking in a different shape. Before exploring options on that front I think it's best to get to the bottom of why we are getting different outputs.

It's possible that differences in our test setups or other project level factors could cause a difference in our results. Would you mind running the code I included in your project and letting me know what console output you get? Thanks!

[Michbeckable]

I have the same problem using mount() from enzyme. Using .debug() I see that the component structure shows nested duplicates. My setup:

react: 15.4.2
enzyme: 2.7.1
jest: 18.1.0
node: v7.8.0

Did someone find a solution?

[Michbeckable]

Ok, in my case I found the reason was some mocking of react components with jest mocking functions before tests running. So I guess this might be a problem of individual test setup. Solved for me.

[bob-carson]

Glad to hear you fixed your issue @Michbeckable.

I'm not using Jest at all while trying to reproduce this, and this package is currently being maintained for use with Enzyme only. That said, if there are any changes that would make Jest users' lives easier, we are happy to take a look at them. Let us know if you have any further issues!