score:-1
it("should render right", () => {
const component = shallow(<testuser />);
const element = component.find('wrapper');
chai.expect(element.props.children).to.have.length(3);
});
score:-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);
});
score:1
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 !
score:1
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:2
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.
Source: stackoverflow.com
Related Query
- Why does shallow Rendering not work as expected?
- Why React-router v4 <Link/> does not work (Changes url but not rendering content)?
- Shallow Rendering with enzyme: actual and expected output does not match
- Why does hot reloading not work for reactjs visual studio 2019 template
- Why formData does not work with multiple files?
- Why does TypeScript assertion of object literal `{a}` work with interface `{a, b}` but not `{a?, b}`
- Why does React.createRef() for material-ui Button element in TypeScript not work correctly?
- In React why does calling a function from another function in our code not work and display?
- Why does select() not work on Safari with ReactJS?
- Why custom css class does not work on React-Semantic-UI elements?
- Why does custom Button component using MUI Button not work on hover with Tooltip?
- Why does "npm start" work but not "react-scripts start" which is what "npm start" apparently executes?
- The resetForm method of Formik does not work as expected
- Why does removeEventListener not work on event handlers installed by React?
- Why does setState Hook from React is rendering twice even not changing the state?
- <Link> does not work as expected in NextJS
- Why ES6 ComputedPropertyName does not work with this react js code?
- Why does my HOC NotEmpty not work when access property?
- React, increment global variable does not work as expected
- Passing imported style object into a custom hook does not work as expected
- Why does window.location not work in my react component?
- Why does useEffect React Hook not work properly with dependency?
- document.createElement does not work as expected in componentDidMount in React?
- why <Redirect to='/vacations' /> Does not work
- Why react-router does not work in the server? It shows 404 error after refreshing the page
- Why doesn't enzymes find() with component props work the same way when using full rendering or shallow rendering?
- Why does this mock api not work as expected?
- Why does arrow function work but regular function does not React JS
- React useEffect does not work as expected
- ReactJS. - Why does this work in ReactJS and not the other way
More Query from same tag
- React - importing todos but I don't see it in the file
- React: Spring transition not behaving properly
- I am trying to build a vertical mousewheel control swiper in react.js but it is not working?
- Wrong data from client passes GraphQL validation
- How to update state with usestate in an array of objects?
- Firebase silently fails in electron app
- How does the actionCreator, props, and component connect in React-Redux?
- Cannot Create React App Using create-react-app
- Transfer { ..this.props } but exclude certain ones
- Modal rendering several times
- How can I disable the button in design as well?
- React Load Spinner While Array of Images Load
- Uploading multiple images with React
- Setting Up base url for production while using proxy in development in React
- How to use image to replace Navbar.brand?
- Can React.FC receive tuple as unnamed argument?
- ReactJS : Creating an Array of Arrays in ReactJS
- In ant design protable, is there a way to use a select in a search field, where all the options for the select are from an API call to remote server?
- Rollup image import with only file copy and preserve import
- How to add a new key/value pair in a nested Map using Immutable.js
- ESLint experimentalObjectRestSpread not applying
- Need help rendering ReactJS component - YouTube API
- Consumers re-render when Provider re-renders
- How to pass value via `props` in export function in react-hooks
- Regex - Capture anything within parentheses and brackets
- componentDidMount() not working in reactJs v15.x
- Problems to dispatch action in React/Redux
- Display chart data based on API call
- Having trouble deploying React-Express app to Heroku
- devDependencies not installing