Getting error when running tests.

[ericklind]

I've been trying to get the Hello.test.tsx to work, but I keep getting the following error:

➜  sparks npm run test

> [email protected] test /Users/erick/Documents/Code/Sparks/sparks
> react-scripts-ts test --env=jsdom

Out of the box, Create React App only supports overriding these Jest options:

  • collectCoverageFrom
  • coverageReporters
  • coverageThreshold
  • snapshotSerializers.

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

  • transform
  • testRegex
  • moduleFileExtensions

If you wish to override other Jest options, you need to eject from the default setup. You can do so by running npm run eject but remember that this is a one-way operation. You may also file an issue with Create React App to discuss supporting more options out of the box.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test: `react-scripts-ts test --env=jsdom`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/erick/.npm/_logs/2017-11-03T17_22_19_348Z-debug.log

I've tried clearing everything out of my node_modules, and reinstalling everything, but nothing seems to work.

Thoughts?

[ericklind]

Okay,
I figured out what was going on and how to get things to work.
I added the testSetup.ts in the src directory.

// src/testSetup.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() });

Then I installed the following in my devDependencies

"devDependencies": {
    "@types/enzyme": "^3.1.3",
    "@types/enzyme-adapter-react-16": "^1.0.0",
    "@types/jest": "^21.1.5",
    "@types/node": "^8.0.47",
    "@types/react": "^16.0.19",
    "@types/react-dom": "^16.0.2",
    "enzyme": "^3.1.0",
    "enzyme-adapter-react-16": "^1.0.3",
    "react-addons-test-utils": "^15.6.2",
    "react-test-renderer": "^16.0.0",
    "ts-jest": "^21.1.4"
  }

That seemed to do the trick.

Please update the tutorial as it doesn't work out of the box.

Thanks!

[changLiuUNSW]

I think we have to do the same fix for react-scripts-ts like react-scripts:
facebook/create-react-app#3340