Why does shallow Rendering not work as expected?

Question

I am using enzyme for test my create-react-app component, but It did not work intuitively. Am I misunderstanding what shallow rendering is?

import React from "react";
import { Card } from "./Card";

const TestUser = () => {
  return (
    <div>
      <div className="test" />
      <div className="wrapper">
        <Card />
        <Card />
        <Card />
      </div>
    </div>
  );
};

export default TestUser;

.test.js

import React from "react";
import TestUser from "./TestUser";
import { shallow } from "enzyme";
import { Card } from "./Card";

it("should render right", () => {
  const component = shallow(<TestUser />);
  expect(component.find(Card)).to.have.length(3);
});

I expect it should pass the test, cause it does have 3 Card components in TestUser

But it output: TypeError: Cannot read property 'have' of undefined

How does that work?

score 2 · Answer 1 · answered Jun 19 '19 at 18:14

I have the same problem. It solved by using the below .

I have created a jest.config.js file at the root level and add below code.

module.export ={
  setupFiles:[ '<rootDir>/src/setUpTests.js']
 }

I have created setUpTests.js file and add below code.

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

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

And solved my problem.

Ravindra Ranwala · Answer 2 · 2017-06-25T11:54:41.783

Try this out. You have to give it as a string literal. Also to me the expect library you are using is not the one you get from chai and may have different set of helper methods, hence giving that error. Unfortunately I don't have the code with me to check further. Nothing wrong with shallow rendering at all.

import React from "react";
import TestUser from "./TestUser";
import { shallow } from "enzyme";
import { expect } from 'chai';

it("should render right", () => {
  const component = shallow(<TestUser />);
  expect(component.find('Card')).to.have.length(3);
});

Also you don't need to have this statement here, import Card from "./card";

In the TestUser component change the import statement like this.

import Card from "./card";

So now your TestUser component should look like this.

import React from "react";
import Card from "./card";

const TestUser = () => {
  return (
    <div>
      <div className="test" />
      <div className="wrapper">
        <Card />
        <Card />
        <Card />
      </div>
    </div>
  );
};

export default TestUser;

Use the following command to install chai library.

npm install --save chai

If you really want to use Jest change your assertion as below.

import React from "react";
import TestUser from "./testuser";
import { shallow } from "enzyme";

it("should render right", () => {
  const component = shallow(<TestUser />);
  expect(component.find('Card')).toHaveLength(3);
});

Personally I like mocha due to it's fluent API.

Hope this helps. Happy coding !

I am using `create-react-app`. [enzyme doc](http://airbnb.io/enzyme/docs/guides/jest.html), I think I do not need anything else installed besides `enzyme`. Because thay already pre-configured? Am I wrong? — Liuuil, Jun 25 '17 at 02:56
It seems they are using jest for the assertion: https://facebook.github.io/jest/docs/expect.html#content You can eject the project using 'npm run eject' and then customize it. Then you have more power and control over it. After that you can install mocha if you want. I am a mocha fan. If you need to go with Jest you may need to do some research and fix the issue. — Ravindra Ranwala, Jun 25 '17 at 04:06

score 1 · Answer 3 · answered Jun 27 '17 at 10:37

Shallow rendering won't go as deep as you want in this case because of your div nesting. http://airbnb.io/enzyme/docs/api/shallow.html

Either use mount or use .dive() API to go one level further. See the example in the enzyme docs: http://airbnb.io/enzyme/docs/api/ShallowWrapper/dive.html

score -1 · Answer 4 · edited Jun 26 '17 at 21:26

-1

it("should render right", () => { 
  const component = shallow(<TestUser />);
  const element = component.find('wrapper');
  chai.expect(element.props.children).to.have.length(3); 
});

edited Jun 26 '17 at 21:26

Paul Roub

36,322
27
84
93

answered Jun 25 '17 at 02:19

mhdnp1234

178
7

cptiwari20 · Answer 5 · 2018-11-20T15:12:03.303

-1

Use ().toEqual() instead of .to.have.length() as .to.have is not any function in jest expect library Visit here for more info

import React from "react";
import TestUser from "./testuser";
import { shallow } from "enzyme";

it("should render right", () => {
const component = shallow(<TestUser />);

expect(component.find('Card').length).toEqual(3);
});

edited Nov 20 '18 at 15:12

answered Nov 20 '18 at 15:02

cptiwari20

442
1
7
18

Why does shallow Rendering not work as expected?

5 Answers5