Got the AssertionError: expected { Object (root, unrendered, ...) } to equal true

[NikitaSergeevich]

I'm quite new to react and react-native testing, after some research I decided to use mocha and enzyme to test my components. So i used react-native-mockery, redux-mock-store and react-native-svg-mock in order to run any test. my TestComponent.js file has following code:

import mockery from "mockery";
import 'babel-polyfill';
import reactNativeSvgMock from "react-native-svg-mock";
mockery.enable();
mockery.registerMock("react-native-svg", reactNativeSvgMock);
var DeskScreen = require( '../app/containers/DeskScreen/DeskScreen');
import React, {View, Text, StyleSheet} from 'react-native';
import {Provider} from 'react-redux';
import {shallow, render, mount} from 'enzyme';
import {expect} from 'chai';
import configureStore from 'redux-mock-store';
import reducer from "../app/reducers";
import Button from "../app/containers/Common/Button";
import ButtonWithNoFlex from "../app/containers/Common/ButtonWithNoFlex";
const mockStore = configureStore([]);

describe('<Test />', () => {
    it('it should render 1 view component', () => {
        const store = mockStore(reducer);
        var button = shallow(
            <ButtonWithNoFlex/>
        )
        expect(button).to.have.length(1);
        expect(button.find(View)).to.equal(true);
    });
});

but I get following error:

0 passing (984ms) 1 failing

1) it should render 1 view component: AssertionError: expected { Object (root, unrendered, ...) } to equal true at Context. (test/TestComponent.js:24:38)

Can anybody help me to fix it? ButtonWithNoFlex component is just simple 'dumb' component which looks like that:

import React, {Component} from 'react';
import {View, Text, TouchableHighlight, StyleSheet} from "react-native";
import {connect} from 'react-redux'

export default class ButtonWithNoFlex extends Component {

    static get defaultProps() {
        return {
            isEnabled: true,
            isVisible: true,
        };
    }

    handlePress() {
        this.props.onPress();
    }

    render() {
        let disabledButton = (
            <View style={styles.rootContainer}>
                <View style={[styles.container, this.props.disabledStyle, this.props.container]}>
                    {this.props.icon}
                    <Text style={[styles.text, this.props.textStyle]}>{this.props.text}</Text>
                </View>
            </View>
        );

        let enabledButton = (
            <TouchableHighlight activeOpacity={0.6}
                                onPress={this.handlePress.bind(this)}
                                underlayColor={'transparent'}>
                <View style={[styles.container, this.props.container]}>
                    {this.props.icon}
                    <Text style={[styles.text, this.props.textStyle]}>{this.props.text}</Text>
                </View>
            </TouchableHighlight>
        );

        let invisibleButton = (
            <View style={styles.rootContainer}>
                <View style={[styles.container, styles.borderColorTransparent]}>
                    {this.props.icon}
                    <Text style={[styles.text, this.props.textStyle, styles.colorTransparent]}>{this.props.text}</Text>
                </View>
            </View>
        );

        let content = null;

        if (!this.props.isEnabled) {
            content = disabledButton;
        } else {
            content = enabledButton;
        }

        if (!this.props.isVisible) {
            content = invisibleButton;
        }

        return (
            content
        )
    }
}

var styles = StyleSheet.create({
    rootContainer: {
        margin: 8,
    },
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        borderWidth: 2,
        borderColor: "#476fd0",
        borderRadius: 10,
    },
    text: {
        alignSelf: 'center',
        fontSize: 30,
        fontFamily: 'MullerNarrow-Light',
        textAlign: 'center',
        color: "#4f4e4e",
    },
    colorTransparent: {
        color: 'transparent',
    },
    borderColorTransparent: {
        borderColor: 'transparent',
    }
})

[RealOrangeOne]

This isnt an issue with react-native-mock, more with how you're asserting. A rendered component will never equal 'true', it's a component. If youre after a simple check, you can use .to.be.OK;, or even better, check that the right number render with .to.have.lengthOf(1);.

Closing, non-issue

[NikitaSergeevich]

So guys, maybe you can put some light on situation when I trying to test more complicated component to which I provide a mocked store in a following way:

import mockery from "mockery";
import 'babel-polyfill';
import reactNativeSvgMock from "react-native-svg-mock";
mockery.enable();
mockery.registerMock("react-native-svg", reactNativeSvgMock);
var DeskScreen = require( '../app/containers/DeskScreen/DeskScreen');
import React, {View, Text, StyleSheet, TouchableHighlight} from 'react-native';
import {Provider} from 'react-redux';
import {shallow, render, mount} from 'enzyme';
import {expect} from 'chai';
import configureStore from 'redux-mock-store';
import reducer from "../app/reducers";
import Button from "../app/containers/Common/Button";
import ButtonWithNoFlex from "../app/containers/Common/ButtonWithNoFlex";
import Drawer from 'react-native-drawer';
var DeskHeader = require('../app/containers/DeskHeader/DeskHeader');

const mockStore = configureStore([]);

describe('<Test />', () => {
    it('it should render 1 view component', () => {
        const store = mockStore(reducer);
        var comp = shallow(
            <Provider store={store}>
                <DeskScreen/>
            </Provider>
        );
        expect(comp.find(Drawer)).to.have.length(1);
    });
});

[RealOrangeOne]

Unfortunately with that little information, it's impossible to help you. This also doesnt seem like an issue with react-native-mock at all. I suggest seeking help in a less specific location such as Stack Overflow