Typescript-react-starter: Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none.

[rimatla]

Following the documentation of this tutorial the Hello.test.tsx files errors like the title above.

From what I read online, the packages @types/enzyme and react-addons-test-utils would suffice the need to configure an adapter manually on a testsSetup.js

That didn't work.

I took the second route and wrote a testsSetup.js inside my src

setupTests.js (should this be .ts , .tsx?, either way it did not work)

import * as enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';

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

Hello.test.tsx

import * as React from 'react';
import * as enzyme from 'enzyme';
import Hello from './Hello';

it('renders the correct text when no enthusiasm level is given', () => {
    const hello = enzyme.shallow(<Hello name='Daniel' />);
    expect(hello.find(".greeting").text()).toEqual('Hello Daniel!')
});

Package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-scripts-ts": "2.14.0"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/enzyme": "^3.1.9",
    "@types/enzyme-adapter-react-16": "^1.0.2",
    "@types/jest": "^22.2.2",
    "@types/node": "^7.0.60",
    "@types/react": "^16.3.6",
    "@types/react-dom": "^16.0.4",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "react-addons-test-utils": "^15.6.2",
    "typescript": "^2.8.1"
  }
}

Another source suggested adding extra config to jest on package.json such as

........
  "jest": {
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js"
  }

However that errors as:

These options in your package.json Jest configuration are not currently supported by Create React App:

  • setupTestFrameworkScriptFile

Further...
A fresh clone of this repo errors out not running any test suites and complaining about cheerio names.

How can we get the Enzyme Adapter to work with the current project setup on .tsx files?

[chmelevskij]

Hey there, so it didn't work for me as well. So I run npm run eject and added the src/setupTests.js with:

import * as enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';

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

and then

// package.json
"jest": {
  // ...
  "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js"
 }

[patridge]

I ran into this as well while trying to get started with React. When running npm run eject, it sure sounds like something I don't want to do. I don't know if coming back from an eject is simple, but if anyone else hits that situation, you can also add that enzyme.configure line (and imports) just to the tutorial's Hello.test.tsx file.

[chmelevskij]

If it's just a tutorial when I don't see why you should be scared to eject? It's not like you'll need update your tutorial. But didn't thought about adding it in same file. Still would be a bit tedious to add it everywhere you write test.

[patridge]

Sorry, I’m just too new to the land of npm. I have no idea what eject does, but the warnings it throws up before confirming had me convinced I shouldn’t. I definitely agree that having to do that for every test file in a large app would get old.

[chmelevskij]

Eject is not is just react specific, all it does is spits out the configuration which create-react-app uses so you won't get updates from cra but you can customize it the way you won't.

[catchin]

When using a file called src/setupTests.ts with the content mentioned in @rimatla's first post, it works out of the box for me without ejecting.

BTW: This functionality is referenced in this pr from react-scripts-typescript.

[ShawnXiao105]

@catchin I follow your pr to add react-test-renderer and enzyme-adapter-react-16 without use eject. npm test still fail.

The error message is the same as

These options in your package.json Jest configuration are not currently supported by Create React App:

  • setupTestFrameworkScriptFile

[k644606347]

Why did I get an error in setupTests.js, i have executed npm run eject:

Test suite failed to run

     TypeError: Adapter is not a constructor

invalid code:
import * as Adapter from 'enzyme-adapter-react-16';
valid code:
import Adapter from 'enzyme-adapter-react-16';

Package.json

  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom"
  },
  "devDependencies": {
    "@types/enzyme": "^3.1.11",
    "@types/enzyme-adapter-react-16": "^1.0.2",
    "@types/jest": "^23.1.1",
    "@types/node": "^10.3.4",
    "@types/react": "^16.4.1",
    "@types/react-dom": "^16.0.6",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "identity-obj-proxy": "^3.0.0",
    "node-sass": "^4.9.0",
    "react-addons-test-utils": "^15.6.2",
    "sass-loader": "^7.0.3",
    "typescript": "^2.9.2"
  },
  "jest": {
    "setupTestFrameworkScriptFile": "./src/setupTests.js",
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}"
    ],
    "setupFiles": [
      "<rootDir>/config/polyfills.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.(j|t)s?(x)",
      "<rootDir>/src/**/?(*.)(spec|test).(j|t)s?(x)"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "moduleNameMapper": {
      "\\.scss$": "identity-obj-proxy",
      "^react-native$": "react-native-web"
    },
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.tsx?$": "<rootDir>/config/jest/typescriptTransform.js",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|ts|tsx)$"
    ],
    "moduleFileExtensions": [
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "web.js",
      "js",
      "web.jsx",
      "jsx",
      "json",
      "node",
      "mjs"
    ],
    "globals": {
      "ts-jest": {
        "tsConfigFile": "./tsconfig.test.json"
      }
    }
  }

[mvasin]

Did anyone manage to follow the react tutorial without ejecting lately?

For me, substituting this line

import * as enzyme from 'enzyme';

with these lines

import * as enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';

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

in a test file directly does work. Putting those three lines in src/setupTests.ts does not.

It's a frustrating experience, trying to boost your productivity with TypeScript and immediately getting stuck with the very first and the very basic tutorial, that's supposed to be polished.

Here's my package.json:

{
  "name": "schedule-ts",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts-ts": "3.1.0"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/enzyme": "^3.1.14",
    "@types/enzyme-adapter-react-16": "^1.0.3",
    "@types/jest": "^23.3.2",
    "@types/node": "^10.11.2",
    "@types/react": "^16.4.14",
    "@types/react-dom": "^16.0.8",
    "enzyme": "^3.6.0",
    "enzyme-adapter-react-16": "^1.5.0",
    "react-test-renderer": "^16.5.2",
    "typescript": "^3.1.1"
  }
}

here's my src/App.test.tsx:

import * as enzyme from 'enzyme';
import * as React from 'react';
import App from './App';


it('renders without crashing', () => {
  expect(() => {
    enzyme.shallow(<App />)
  }).not.toThrow();
});

and here's src/setupTests.ts:

import * as enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';

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

[ganeshpatro321]

import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";

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

This prevents the error Adapter is not a constructor