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

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.

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!!