Typescript-react-starter: Cannot run Hello.test.tsx

[wongjiahau]

Enzyme expect to have an Adapter configured.

How can I solve this issue?

[matthewlal]

Creating a setupTests.js file in /src worked for me.

_setupTests.js_

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

configure({ adapter: new Adapter() })

[wongjiahau]

@matthewlal I haven't try it out though, but thanks for your reply anyway

[perfectsquircle]

For what it's worth, I also ran into this issue. I think the documentation should be updated to work with Enzyme 3.

After creating a fresh project from

create-react-app my-app --scripts-version=react-scripts-ts

Here's what I did to get Enzyme 3 working:

Install dependencies

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

Add file src/setupTests.ts

// Temporary hack to suppress error 
// https://github.com/facebookincubator/create-react-app/issues/3199
window.requestAnimationFrame = function (callback) {
    setTimeout(callback, 0);
    return 0;
};

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

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

After this, tests using enzyme run green.

Took me a minute to get this all working so I hope this helps others.

[camurai]

Thank you so much matthewlal and perfectsquircle! been google searching all over to try and find out what I was doing wrong! everywhere else just has the .js version of the setupTest file. looks like the typescript version needs the "import * as " instead of just import to work. I possibly even saw a few versions like that but dismissed them as being the same as what I had.

This definitely needs to be added to documentation here and probably on the enzyme documentation as well.

[samrae7]

@perfectsquircle: Thanks. However, am i right in thinking that inside the test spec file you then need to import Enzyme but import it from the setupTests.js file? (which means you need to export the enzyme object after configuring it) That's the only way I could get it to work

[wongjiahau]

I actually did another way to overcome this issue, I use enzyme on the transpiled JS files, and use mocha to test on the TS files. By doing this way I don't have to be dependent on the TypeDefinition file of Enzyme.

[NotoriousWebmaster]

@perfectsquircle Thank you so much!

But I'm confused and befuddled as to how this works. src/setupTests.js is not being invoked from anywhere, so how is it getting to Hello.test.tsx and so forth?

[matthewlal]

@NotoriousWebmaster
Take a look at this:
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#initializing-test-environment

Essentially it's part of the create-react-app package

[NotoriousWebmaster]

Thanks @matthewlal. I figured it might be something like that. Much appreciated.