Could not find declaration file for enzyme-adapter-react-16?

Question

I've been using Enzyme to test components in my React application for some time. After updating my packages for the first time in a few weeks I've 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 my test file:

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

However, as my application is written in TypeScript, I now run into two new problems.

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

I'm relatively new to TypeScript so I need some help. I've tried to install types for enzyme-adapter-react-16 but those do not appear to exist.

Should I attempt to add them myself, or is there some way I can avoid this problem all together?

Also curious what made this error appear. I didn't need an Adapter before, why now?

Answer 1

Should I attempt to add them myself, or is there some way I can avoid this problem all together?

I believe you are correct that there are currently no types for enzyme-adapter-react-16 - it's pretty new, so it would seem that no one has created any yet.

You can create them yourself, and if you thought they were well defined, you could potentially contribute them to DefinitelyTyped for others to use. To "avoid" the issue, you can get TypeScript to ignore the fact that it has no type information.

To ignore the type errors:

• For the first error, the error message tries to help with the "add a new declaration (.d.ts) file ...". So, you could create a file (I usually put it in a folder called "/types") called something like enzymeAdapter.d.ts, and make the contents declare module 'enzyme-adapter-react-16'; (from the error message). This basically tells typescript to just treat the imported object as any type (ie. no type checking).

• For the second error, you can cast the enzyme import to any, then call configure. For example: (enzyme as any).configure({ adapter: new Adapter() });. If tslint complains about using any, you can get it to ignore just that line with a // tslint:disable-next-line:no-any comment 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() }); 

Also curious what made this error appear. I didn't need an Adapter before, why now?

This is a new design choice from the enzyme project for version 3 - you can read details about the major changes from version 2.x here. I think the adapter approach is to make handling the different requirements for supporting different versions of react easier and more consistent.

Answer 2

It you are using React 16+ and have ejected your app add the following packages:

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

Then you have to set up Enzyme by creating the file src/setupTests.js. 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 amend the package.json - add /src/setupTests.js to the setupFiles array:

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

Amend setupFiles array

Before: Before screenshot

After: After screenshot

I think we can all agree that green is a lovely colour!!