Could not find the declaration file for the adapter-reaction-16 enzyme?

Question

I have been using Enzyme to test components in a React application for some time. After updating the packages for the first time in several weeks, I started getting an error from my tests.

FAIL src/__tests__/title.test.ts ● Testing title component › renders Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. [...] To find out more about this, see http://airbnb.io/enzyme/docs/installation/index.html 

I proceed to install 'enzyme-adapter-react-16' as described in the link and add the following lines to the test file:

 import * as enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; enzyme.configure({ adapter: new Adapter() }); 

However, since my application is written in TypeScript, I now face two new problems.

To clarify the images, the first TS7016 error is that there are no types for enzyme-adapter-react-16 , and the second TS2339 error says that enzyme does not have a configure property.

I am relatively new to TypeScript, so I need help. I tried to set the types for enzyme-adapter-react-16 , but they don't seem to exist.

Should I try to add them myself, or is there a way to avoid this problem?

It is also interesting how this error appeared. I don’t need an adapter before, why now?

Answer 1

Should I try to add them myself, or is there a way to avoid this problem?

I believe that you are right that there are currently no types for enzyme-adapter-react-16 - this is quite new, so it would seem that no one has yet created.

You can create them yourself, and if you thought that they were clearly defined, you could add them to DefinitelyTyped for other users. To "avoid" the problem, you can get TypeScript to ignore the fact that it has no information about type.

To ignore errors like:

• For the first error, the error message tries to help with adding a new declaration file (.d.ts) ... ". So you can create a file (usually I put it in a folder called" / types ") called something like enzymeAdapter.d.ts , and create the contents of declare module 'enzyme-adapter-react-16'; (from the error message). Basically, this means that TypeScript simply treats the imported object as type any (i.e. Doesn't check type of).

• For the second error, you can specify enzyme import in any , and then invoke configure . For example: (enzyme as any).configure({ adapter: new Adapter() }); . If tslint complains about using any , you can make it ignore only this line with the comment // tslint:disable-next-line:no-any above.

Full code:

 import * as enzyme from 'enzyme'; import * as Adapter from 'enzyme-adapter-react-16'; // tslint:disable-next-line:no-any (enzyme as any).configure({ adapter: new Adapter() }); 

It is also interesting how this error appeared. I don’t need an adapter before, why now?

This is a new design choice from the enzyme project for version 3 - you can read more about the major changes from version 2.x here . I think the adapter’s approach is to simplify and harmonize the different requirements in order to support different response versions.

Answer 2

If you are using React 16+ and uninstalling the application, add the following packages:

 yarn add enzyme react-test-renderer enzyme-adapter-react-16 --dev 

Then you must configure Enzyme by creating the src / setupTests.js file. Add this:

 import React from 'react'; import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; configure({ adapter: new Adapter() }); 

Finally, you have to change package.json - add /src/setupTests.js to the setupFiles array:

 "setupFiles": [ "<rootDir>/config/polyfills.js", "<rootDir>/src/setupTests.js" ], 

Change array setupFiles

To: to screenshot

After: after the screenshot

I think we can all agree that green is a beautiful color !!

Answer 3

It took me too long to decide. Hope this helps someone:

Using Create-React-App 2.1.3 with Enzyme 3.8.0, Enzyme Adapter-Reaction-16: 1.7.1, Enzyme-json 23.6.0

Solution for me:

src / setupTests.js:

 import Enzyme, { configure } from "enzyme"; const Adapter = require("enzyme-adapter-react-16"); Enzyme.configure({ adapter: new Adapter() }); configure({ adapter: new Adapter() }); 

Then, say, the component you want to test with an enzyme and a joke:

 import React from "react"; import Enzyme from "enzyme"; import Component from "./component"; const { shallow } = Enzyme; //whatever you want to use here test("component exists", () => { expect(Component).toBeDefined(); }); 

// this is not necessary, but only for completeness - no other configuration happens:

package.json:

 "jest": { "snapshotSerializers": ["enzyme-to-json/serializer"] } 

Answer 4

I also noted this issue on Windows with a simple typo in my import statement (linting saved me here):

 import Enzyme from 'Enzyme'; 

rather than

 import Enzyme from 'enzyme';