Enzyme: Shallow render evaluate to empty object ShallowWrapper {}

[polymer940c]

Summary: I am having issue with Shallow(), it evaluate into shallowWrapper {}
This is running on react 16 with context api.
Am i using shallow wrong??

packages i am using

"dependencies": {
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16": "^1.7.1",
    "jest": "^23.6.0",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-scripts": "2.1.1"
  },
 "devDependencies": {
    "react-test-renderer": "^16.7.0"
  }

testfile

configure({ adapter: new Adapter() });

const testUser = {
  id: 1,
  first: 'John',
  last: 'Roberts',
  age: 51,
  location: 'Chicago, IL',
  description: 'John is a retired YouTuber'
};
const testFunction = () => {
  console.log('testfunction');
};
describe('for <SampleUser /> component', () => {
  it('renders correctly', () => {
    let tree = renderer
      .create(<UserSample user={testUser} selectUser={testFunction} />)
      .toJSON();
    console.log(tree);
    expect(tree).toMatchSnapshot();
  });
  it('update store to show selected user', () => {
    const wrapper = shallow(<Users />);
    const wrapper2 = shallow(
      <UserSample user={testUser} selectUser={testFunction} />
    );
    console.log(wrapper);
    console.log(wrapper2);
  });
});

The console logs here;
console.log(tree) contains info about the component, while shallow() => {}

console.log src/test/components/user/userSample.test.js:28
      { type: 'div',
        props: { className: 'sample-user-container p-4' },
        children:
         [ { type: 'img', props: [Object], children: null },
           { type: 'div', props: [Object], children: [Array]} ] }
    console.log src/test/components/user/userSample.test.js:36
      ShallowWrapper {}
    console.log src/test/components/user/userSample.test.js:37
      ShallowWrapper {}

here is User component

import React, { Component } from 'react';
import { MyContext } from '../../Provider';
import UserSample from './UserSample';

export default class Users extends Component {
  render() {
    return (
      <div className="users-wrapper">
        <ul>
          <MyContext.Consumer>
            {context =>
              context.users.map(user => (
                <li key={user.id}>
                  <UserSample user={user} selectUser={context.selectUser} />
                </li>
              ))
            }
          </MyContext.Consumer>
        </ul>
      </div>
    );
  }
}

[ljharb]

enzyme does not have snapshot support; the closest is wrapper.debug().

enzyme wrappers are not directly console-loggable in any useful manner.

[polymer940c]

update!
apparently ShallowWrapper {} is what shallow(<Component /> returns.
I thought that becuase i was getting read property 'equal' of undefined because the object is empty.

const component = shallow(
      <UserSample user={testUser} selectUser={testFunction} />
    );
console.log(component.type());

it shows div

but expect(wrapper.type()).to.equal('div');
=> TypeError: Cannot read property 'equal' of undefined

[polymer940c]

enzyme does not have snapshot support; the closest is wrapper.debug().

enzyme wrappers are not directly console-loggable in any useful manner.

snapsshot is coming from 'react-test-renderer' I just follow react doc. but they don't have simulate click. Which they recommend enzyme.

if enzyme is not console-loggable, what is the conventional way of writing test in enzyme?
I am running into these issues with just copy and pasting enzyme tutorial. is it related to react 16?

[polymer940c]

So i made a new file, just to test. and this is the results, i dont know what to make of it.
https://airbnb.io/enzyme/docs/api/ShallowWrapper/shallow.html
//sample.test.js

import { shallow, configure, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

function Bar() {
  return (
    <div>
      <div className="in-bar" />
    </div>
  );
}
function Foo() {
  return (
    <div>
      <Bar />
    </div>
  );
}
const wrapper = shallow(<Foo />);
expect(wrapper.find('.in-bar')).to.have.lengthOf(0);
expect(wrapper.find(Bar)).to.have.lengthOf(1);
expect(
  wrapper
    .find(Bar)
    .shallow()
    .find('.in-bar')
).to.have.lengthOf(1);

results in this

  ● Test suite failed to run

    TypeError: Cannot read property 'have' of undefined

      38 | }
      39 | const wrapper = shallow(<Foo />);
    > 40 | expect(wrapper.find('.in-bar')).to.have.lengthOf(0);
         | ^
      41 | expect(wrapper.find(Bar)).to.have.lengthOf(1);
      42 | expect(
      43 |   wrapper

[ljharb]

Are you using chai's expect?

[ljharb]

If not, you might be using jest's, which has a very different matcher API.

[polymer940c]

I am not using chai. this is pretty much boiler plate from create-react-app. jest is default installed.
from here https://airbnb.io/enzyme/docs/guides/jest.html it dosen't seem like i need to do anything to use jest with enzyme? "jest": "^23.6.0"

oh I see! sorry to have posted the question in the wrong enzyme github. Thanks! @ljharb

[ljharb]

The matcher syntax of to dot something is specific to chai.

[polymer940c]

yeah i figured that after what u mention chai and jest. totally rude of react doc to reference Airbnb doc.https://reactjs.org/docs/shallow-renderer.html

[ljharb]

I don’t agree that it’s “rude”; CRA is not React, and using react doesn’t mean you’re using CRA or jest.