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?

Utilitarianism

This doesn't seem to be an issue for me. I'm using enzyme-adapter-react-16.2 with "enzyme": "^3.6.0". I do have @types/enzyme 3.1.13 type declarations file installed though. – Twentyfour

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.

Nawrocki

No problem @Utilitarianism :) For future people, these should only be temporary work-arounds until the typings catch up with the libraries. – Nawrocki

@Utilitarianism FYI: updating to the latest version of @types/enzyme (v2.8.9) should now include the configure function, so the 2nd error work-around should no longer be required. People move fast! – Nawrocki

do i need to put these adapter configuration line in each test file? – Porshaport

@Porshaport You only need to configure Enzyme once for a test run (for any number of tests). When using create-react-app I put it in the src/setupTests.js file which runs once before any tests do. Check out the docs for your test runner and it should have a way to do something similar. – Nawrocki

It looks like wonderful open source contributors have now added types for enzyme-adapter-react-16 so neither work around should be needed any more. – Nawrocki

@JonoJob I have sort of related issue: #47284574 could you please see if you can help! TIA – Wristwatch

I found the syntax import * as Adapter from 'enzyme-adapter-react-16'; didnt work, but import Adapter from 'enzyme-adapter-react-16'; did. The first produced an error Adapter is not a constructor. I also had to change (enzyme as any).configure({adapter: new Adapter()}); to (enzyme).configure({adapter: new Adapter()});. Just fyi – Tuppeny

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

Asymmetry

Answer 3

Took me way too long to solve. Hope this helps someone:

Using Create-React-App 2.1.3 with enzyme 3.8.0, enzyme-adapter-react-16: 1.7.1, enzyme-to-json 23.6.0

Solution for me:

src/setupTests.js :

import Enzyme, { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16"


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

then in say component you want to test w/ enzyme & jest:

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 isn't necessary, but just for completeness sake -- no other config is happening:

package.json:

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

Corsage

Why did you import configure 2 times, then overwrite it 2 times? This is ---> Enzyme.configure({ adapter: new Adapter() }); is the same as ---> configure({ adapter: new Adapter() }); – Etude

Answer 4

You should add its type for typescript. You can use this npm package:

npm i @types/enzyme-adapter-react-16 --save-dev

Sunnisunnite

Answer 5

I have 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';

Chaulmoogra

Answer 6

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

Gherlein