React enzyme testing library

user_10319104 0
Viewed 109

I am new to react testing libraries and i am keen to use enzyme. As I went through the docs, i found that create-react-app allows to include third party testing libraries directly. I tried the following to include enzyme but got no luck. Here is what i tried but its not working in my app.test.js.

import React from 'react';
import {configure, shallow} from 'enzyme'
import AboutPage from './AboutPage';

   describe('About us',() =>{
      it('About us content validation', ()=>{
      const wrapper = shallow(<AboutPage />);
      const textHeader = <p className="value-col-heading">EMPATHY</p>;
     expect(wrapper.contains(textHeader)).toEqual(true);
     });
    });

I am getting the following error:

Enzyme Internal server error : Enzyme expects an adapter...
reactjs
2 Answers

I can see that your error is obvious as you haven't set any adapter for enzyme. Enzyme is a javaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output. Apart from that it requires an adapter to be configured with it like below: You can try this and see if it works:

import React from 'react';
import {configure, shallow} from 'enzyme'
import Adapter from 'enzyme-adapter-react-16' // require your adapter from 
 here
import AboutPage from './AboutPage';
configure({adapter : new Adapter()}); // use configure to pass your adapter 
 object

describe('About us',() =>{
    it('About us content validation', ()=>{
        const wrapper = shallow(<AboutPage />);
        const textHeader = <p className="value-col-heading">EMPATHY</p>;
        expect(wrapper.contains(textHeader)).toEqual(true);
    });
})
user_83988680

As we have in enzyme github's readme file (in installation part) You need to install enzyme along with an Adapter corresponding to the version of react. In your case you need install enzyme-adapter-react-16 by run code bellow in root directory of your app :

npm i --save-dev enzyme-adapter-react-16

After that,you need to configure enzyme to use the adapter you want it to use. To do this modified your app.test.js like this :

import React from 'react';
import Enzyme, {configure, shallow} from 'enzyme';
import AboutPage from './AboutPage';
import Adapter from 'enzyme-adapter-react-16';

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

describe('About us',() =>{
  //what ever that was 
});
user_65144480
Related