Why is .find not a function in the code context below?

import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import { AuthorizedRoutesJest } from './AuthorizedRoutes';

// Components
import {
  Main
} from '../../ponents';

const wrapper = shallow(<AuthorizedRoutesJest />);

describe('<AuthorizedRoutes /> ponent', () => {
  it('should render', () => {
    const tree = toJson(wrapper);
    expect(tree).toMatchSnapshot();
    expect(wrapper).toHaveLength(1);
  });

  it('should contain a Main ponent', () => {
    expect(wrapper).find(Main).toHaveLength(1);
  });
});

Summary of all failing tests FAIL client/containers/Routes/AuthorizedRoutes.test.js

AuthorizedRoutes ponent › should contain a Main ponent

TypeError: expect(...).find is not a function

Why is .find not a function in the code context below?

import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import { AuthorizedRoutesJest } from './AuthorizedRoutes';

// Components
import {
  Main
} from '../../ponents';

const wrapper = shallow(<AuthorizedRoutesJest />);

describe('<AuthorizedRoutes /> ponent', () => {
  it('should render', () => {
    const tree = toJson(wrapper);
    expect(tree).toMatchSnapshot();
    expect(wrapper).toHaveLength(1);
  });

  it('should contain a Main ponent', () => {
    expect(wrapper).find(Main).toHaveLength(1);
  });
});

Summary of all failing tests FAIL client/containers/Routes/AuthorizedRoutes.test.js

AuthorizedRoutes ponent › should contain a Main ponent

TypeError: expect(...).find is not a function

• javascript
• testing
• enzyme
• jestjs

2 Answers 2

I was using .find incorrectly

Here is an example of how to use find:

it('should contain a ConnectedRouter ponent', () => {
  expect(wrapper.find(ConnectedRouter)).toHaveLength(1);
});

it('should contain a Switch ponent', () => {
  expect(wrapper.find(Switch)).toHaveLength(1);
});

it('should contain 7 Route ponents', () => {
  expect(wrapper.find(Route)).toHaveLength(7);
});

This is in addition if you want to find a ponent with specific testID props

it('should render the date when the message was sent', () => {
   expect(chatBubbleComponent.findWhere((node) => node.prop('testID') === 'chat_sent_at')).toHaveLength(1);
});