Skip to content
This repository has been archived by the owner on Nov 16, 2023. It is now read-only.

Getting error when running tests. #88

Closed
ericklind opened this issue Nov 3, 2017 · 2 comments
Closed

Getting error when running tests. #88

ericklind opened this issue Nov 3, 2017 · 2 comments

Comments

@ericklind
Copy link

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
Copy link
Author

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
Copy link

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants