Create-react-app: Tests fail with `async`

Created on 5 Dec 2016 · 23Comments · Source: facebook/create-react-app

Not completely sure this is an issue of this repo, could be a jest's one. I'm reporting it here because it could be a configuration problem.

Description

Running npm test fails when using async/await.

Expected behavior

The test runs

Actual behavior

I receive an error:

  ● Test suite failed to run

    /src/merchants.js: Expected type "Expression" with option {}

      at Object.t.(anonymous function) [as assertExpression] (node_modules/babel-types/lib/index.js:362:13)
      at Array.forEach (native)

Environment

Run these commands in the project folder and fill in their results:

npm ls react-scripts: v0.8.1
node -v: v6.9.1
npm -v: v3.10.8
Operating system: Fedora 24
Browser and version: --

Reproducible Demo

Just a new "cra" project, with an async/await function tested.

I have a demonstration here, just git clone, npm install and npm test.

bug underlying tools

Source

EnoahNetzach

👍1

All 23 comments

The problem seems to be caused by some interaction between the return value of an awaited function and destructuring it.

E.g.:

const getId = async () => {
  const p = await dispatch(42)
  return p.id
}

works, while

const getId = async () => {
  const { id } = await dispatch(42)
  return id
}

const getId = async () => {
  const p = await dispatch(42)
  const { id } = p
  return id
}

don't work.

EnoahNetzach on 5 Dec 2016

In facts, tapping into node_modules/babel-generator/lib/buffer.js and casting the argument str to a String, I get an error that looks like:

var p, null;return _regenerator2.default.wrap
       ^^^^

EnoahNetzach on 5 Dec 2016

Did it work before?

gaearon on 5 Dec 2016

Yes, we're migrating a project from v0.6.1 to the latest

EnoahNetzach on 5 Dec 2016

I'm getting a lot of "strange" errors.

Another one, for example, is that while using immutable, this won't work anymore:

const { Record } = require("immutable")

const User = new Record({ id: NaN })
new User({ id: 42 })

while it worked before (and works now, same version).

and the error is:

TypeError: _definition2.default is not a constructor

EnoahNetzach on 5 Dec 2016

I was able to fix all the errors by reintroducing babel-preset-latest in the test env, so it might be some misconfiguration of babel-preset-env?

EnoahNetzach on 5 Dec 2016

Also removing { targets: { node: 'current' } }, without reintroducing babel-preset-latest seems to make the deed.

EnoahNetzach on 5 Dec 2016

Can you try:

Keeping -env usage like in master
But also reverting https://github.com/facebookincubator/create-react-app/pull/927

gaearon on 5 Dec 2016

If you mean like this:

// ...

const plugins = [

// ...

    // Polyfills the runtime needed for async/await and generators
    [require.resolve('babel-plugin-transform-runtime'), {
      helpers: false,
      polyfill: false,
      regenerator: true,
      // Resolve the Babel runtime relative to the config.
      moduleName: path.dirname(require.resolve('babel-runtime/package'))
    }],
    // The following two plugins are currently necessary to get
    // babel-preset-env to work with rest/spread. More info here:
    // https://github.com/babel/babel-preset-env#caveats
    // https://github.com/babel/babel/issues/4074
    // const { a, ...z } = obj;
    require.resolve('babel-plugin-transform-es2015-destructuring'),
    // const fn = ({ a, ...otherProps }) => otherProps;
    require.resolve('babel-plugin-transform-es2015-parameters')
  ];

// ...

if (env === 'test') {
  module.exports = {
    presets: [
      // ES features necessary for user's Node version
      [require('babel-preset-env').default, {
        targets: {
          node: 'current',
        },
      }],

// ...

no, unfortunately it doesn't work (I always double-check it by reintroducing babel-preset-latest at the end)

EnoahNetzach on 5 Dec 2016

@hzoo Any ideas?

gaearon on 5 Dec 2016

👍1

The result I get from babel-preset-env is that I need:


check-es2015-constants: false
syntax-trailing-function-commas: true
transform-async-to-generator: true
transform-es2015-arrow-functions: false
transform-es2015-block-scoped-functions: false
transform-es2015-block-scoping: false
transform-es2015-classes: false
transform-es2015-computed-properties: false
transform-es2015-destructuring: false
transform-es2015-for-of: false
transform-es2015-function-name: false
transform-es2015-literals: false
transform-es2015-object-super: false
transform-es2015-parameters: false
transform-es2015-shorthand-properties: false
transform-es2015-spread: false
transform-es2015-sticky-regex: false
transform-es2015-template-literals: false
transform-es2015-typeof-symbol: false
transform-es2015-unicode-regex: false
transform-exponentiation-operator: true
transform-regenerator: false

I'll try to reintroduce them one by one..

EnoahNetzach on 6 Dec 2016

👍1

Thanks for your help debugging this.

gaearon on 6 Dec 2016

No worries ^_^

Apparently what I need are:

transform-es2015-arrow-functions

unknown Expression of type "ArrowFunctionExpression"

transform-es2015-destructuring

Expected type "Expression" with option {}

transform-es2015-parameters

var addIndex = function addIndex({ index, ...routes } = {}, base)
                                          ^^^
    SyntaxError: Unexpected token ...

so yeah, the two you were saying before, plus () => {}.

Although we use es6+ a lot, and we have approx 230 unit tests, I have to say that these could be only our needs, and others might need more plugins..

EnoahNetzach on 6 Dec 2016

So these are likely Babel bugs about hidden plugin dependencies? Can you reduce each to an isolated Babel bug report?

gaearon on 6 Dec 2016

Either that, or some bug in babel-plugin-env, I'm going to investigate further tomorrow.

In either case should I make a PR reverting to using babel-plugin-latest for the moment?

EnoahNetzach on 6 Dec 2016

I won't be able to cut a release today anyway so might as well wait for more details (or investigate myself tomorrow if I get there first). Once we know more we'll decide and cut a release.

gaearon on 6 Dec 2016

Seems reasonable

EnoahNetzach on 6 Dec 2016

@EnoahNetzach I'll try and take a look at this later tonight as well