ch08 TweetUtils es2015 module export failing test

[goesbysteve]

Hi,

First thanks for the es2015 version of these files. Using your version of TweetUtils.js the test fail with "TypeError: TweetUtils.getListOfTweetIds is not a function".

If I change the export to commonJS format the test pass.

module.exports.getListOfTweetIds = getListOfTweetIds;

Any ideas? Do your tests run OK?

[jmrog]

Hi, thanks for the comment. Just to confirm, you have cloned this repo, cd'd into the ch08 directory, and run npm install followed by gulp followed by npm test? And that results in the error you mentioned?

If so, I can't reproduce the issue (see image below). If not, please try doing that and seeing whether the tests still fail.

Thanks again.

[goesbysteve]

Thanks for the reply. You got me, I'm actually not running exactly the same config. I'm using webpack but in the rest of the code things run fine as es2015 modules which is what's foxing me. In the tests I'm using babel, jest and babel-jest on the command line so webpack isn't in the mix there.

I'll try cloning as you suggest, maybe something will pop out as obviously different.

Many thanks.

[goesbysteve]

So a clone of that passes the utils test but fails the component tests with the same object undefined error.

ch08/node_modules/react/lib/BeforeInputEventPlugin.js: Cannot read property 'topCompositionEnd' of undefined

A little googling turned up https://github.com/facebook/react/issues/5183 and I'm running npm 3

!!Upgrading jest-cli past v0.9 solves the npm3 issue on auto mocking. I'm on 0.9.2 for reference.

That's not my original issue of course. I'll try to focus on that tomorrow. Thanks again for your help.

[jmrog]

Okay, thanks. I wouldn't be terribly surprised if your original issue also traces back ultimately to jest and/or your npm version. Maybe you can try what's mentioned in https://github.com/facebook/react-native/issues/3999#issuecomment-165033729 and let me know if that gets things working for you? Unfortunately, jest is still very much a black box, so it might take some trial and error.

[jmrog]

Yeah, having read up on it a bit more, I'm almost certain that that comment in my last post contains the solution to your issue. There was a major change between Babel 5 and Babel 6 involving the way that export default is handled, and the two are not compatible. The version of jest/babel-jest specified in this repo (and in the React Essentials book) depends on Babel 5; however, if you are using a more recent version of jest/babel-jest, it probably depends on Babel 6, in which case the test code will have to do things like const TweetUtils = require('../TweetUtils').default; instead of const TweetUtils = require('../TweetUtils');. Some good reading about this here: https://medium.com/@kentcdodds/misunderstanding-es6-modules-upgrading-babel-tears-and-a-solution-ad2d5ab93ce0#.2kk70fn04

Please let me know if that resolves this particular issue for you, and also what version of jest/babel-jest you are using, if you don't mind.

[goesbysteve]

Spot on Jason. I really appreciate your support here. Babel 5>6 has tripped me up a few times but it's forced me to understand why and learn.

Here's the dependencies section from my package.json. jest 0.10 and jest-babel 10.0.1 I played with webpack-babel-jest but not got that working yet but my jest:{} setup in package.json only refers to babel-jest.

"devDependencies": {
    "babel-cli": "^6.6.5",
    "babel-core": "^6.7.2",
    "babel-jest": "^10.0.1",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-1": "^6.5.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-cssnano": "^2.1.1",
    "gulp-plumber": "^1.1.0",
    "gulp-sass": "^2.2.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-watch": "^4.3.5",
    "gulp-webpack": "^1.5.0",
    "jest-cli": "^0.10.0",
    "webpack": "^1.12.14",
    "webpack-babel-jest": "^1.0.4",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "react": "^0.14.8",
    "react-dom": "^0.14.8",
    "snapkite-stream-client": "^1.0.3"
  },

[jmrog]

Hey, no problem! Glad we were able to locate the source of the problem. Thanks for the additional info, too; the version of babel-jest you're using does indeed depend on Babel 6, so that seems to be the source of the test failure.

In order to keep things here compatible with both Babel 5 and Babel 6, I suppose I could have the tests check for the presence of a .default property on the result of the require, and use that if present (Babel 6) or otherwise just fall back to the result of the require itself (Babel 5). I've tested that this will work for Babel 5. Would you mind checking out the babel-6-compat branch of this repo and seeing if building and testing the ch08 files in that branch works for you? If so, I can go through the repo and make similar changes where necessary.

[goesbysteve]

Will check. Initial test with rebase to that branch, unaltered package.json but npm 3 it fell apart. I need to work out which modules to upgrade. I'm concerned though that whereas you may get compatibility across jest-cli & babel-jest the version of npm will be rather more difficult...

Maybe a better approach would be two branches with the alt branch assuming npm 3? Not sure. Long day here and only just had a quick look. I'll give it more time very soon.

[jmrog]

@stevegibbings Any updates? I've kind of let this slip my mind and only just remembered that we never went any further after your last comment. Instead of trying to rebase with the branch I mentioned, it might be easier for you to just incorporate the changes in the diff at https://github.com/jmrog/react-essentials-es6-version/compare/babel-6-compat into your own configuration and see if that gets you past the errors. I think it ought to. That will tell us that we've definitely located the issues with those tests in relation to Babel 6. If there are additional issues with npm 3, that could be a separate issue worth investigating.

[goesbysteve]

@jmrog Sorry I've not been able to put the time in to look at this. I will at the weekend and get back to you.

[goesbysteve]

@jmrog sorry this took longer to get around to. I tried the babel-6-compat branch -

npm 2.15.3 all 4 tests pass with npm 3.3.2 and jest-cli 0.10.2 all 4 tests pass

I tried npm 2.15.3 and jest-cli 0.10.2 and all tests pass, so for complete compatibility I'd say use jest-cli 0.10.2 in the branch as that works with the later jest-cli and npm 2 & 3.

I went back to my webpack config and with the updated utils and components folders copied in all 4 tests pass there too. Obviously that config is quite different though.