StackOverflow - StackOverflow
Why does shallow Rendering not work as expected?
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 !
Was this helpful?
Related Articles
Have a different question?
Can't find the answer you're looking for? Submit your own question to our community.
🛎️ Get Weekly OTA Fixes
New answers, vendor issues, and updates — straight to your inbox.