Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Babel 7.4 + core-js 3 causing tons of padded zeros in Jest tests #9846

Open
milesj opened this Issue Apr 10, 2019 · 3 comments

Comments

Projects
None yet
2 participants
@milesj
Copy link

commented Apr 10, 2019

Bug Report

Current Behavior

I'm in the process of upgrading an internal project to Babel 7.4 (from 7.2) and core-js 3 (from 2). The Webpack bundle works fine, however, a ton of Jest tests are failing with unexpected values being padded with a ton of zeros. Some examples:

<Rating /> › renders the star rating

    expect(received).toBe(expected) // Object.is equality

    Expected: "12"
    Received: "00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000"
 <Row /> › renders data

    expect(received).toBe(expected) // Object.is equality

    Expected: "7"
    Received: "0000000000000000000000000000000000000000000000000000000000000000"
<BottomBar /> › renders the correct content for end steps

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "<BottomBar /> renders the correct content for end steps 1".

    - Snapshot
    + Received

    @@ -5,13 +5,43 @@
          className="primary_4ommi7"
        >
          <Text
            muted={true}
          >
    -       5
    +       0
    +       0
    +       0
    +       0
    +       0
    +       0
    +       0
    +       0
    +       0
    +       0
    +       0
    +       0
    +       0
    +       0
    +       0
    +       0
             / 
    -       5
    +       0
    +       0
    +       0
    +       0
    +       0
    +       0
    +       0
    +       0
    +       0
    +       0
    +       0
    +       0
    +       0
    +       0
    +       0
    +       0
          </Text>
        </div>
        <div
          className="after_m2rwu8"
        >

I've tried all the following combinations. Seems anything using core-js v3 is broken.

  • Babel 7.4 + core-js 2 - WORKS
  • Babel 7.4 + core-js 2 + "usage" built-in - WORKS (but logs warnings)
  • Babel 7.4 + core-js 3 + "usage" built-in - FAILS with padded zeros
  • Babel 7.4 + core-js 3 + "entry" built-in - FAILS with padded zeros

Input Code

Internal only but it's just basic React components.

Expected behavior/code

It simply works with core-js 3.

Babel Configuration (.babelrc, package.json, cli command)

const isTesting = process.env.NODE_ENV === 'test';

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        // corejs: 3,
        // useBuiltIns: 'usage',
        loose: true,
        shippedProposals: true,
        targets: isTesting ? { node: 'current' } : { browsers: ['last 3 Chrome versions'] },
        modules: isTesting ? 'commonjs' : false,
      },
    ],
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
  plugins: [
    'babel-plugin-graphql-tag',
    // TS doesn't support optional chaining, so we use idx instead
    'babel-plugin-idx',
    '@babel/plugin-proposal-class-properties',
    [
      '@babel/transform-runtime',
      {
        // corejs: 3,
        helpers: true,
        regenerator: false,
        useESModules: !isTesting,
      },
    ],
    'react-loadable/babel',
  ],
};

Environment

  • Babel version(s): 7.4.3
  • Node/npm version: node 10.14 / npm 6.5 / yarn 1.15
  • OS: OSX 10.14
  • Monorepo: no
  • How you are using Babel: cli

Possible Solution

Digging into root cause. Found nothing yet.

Additional context/Screenshots

N/A

@babel-bot

This comment has been minimized.

Copy link
Collaborator

commented Apr 10, 2019

Hey @milesj! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community
that typically always has someone willing to help. You can sign-up here
for an invite.

@milesj

This comment has been minimized.

Copy link
Author

commented Apr 10, 2019

The values being turned to zeros are just literal React expressions. Quick example.

const data = { id: 123 };

function Test() {
  return <div>{data.id}</div>
}

If I console log data, I see 123 correctly. But when the tests run, the {data.id} becomes the padded zeros string. No idea why yet.

Perhaps the issue is in Enzyme somewhere?

@milesj

This comment has been minimized.

Copy link
Author

commented Apr 17, 2019

Nuked node modules and lock file, re-installed everything fresh, and its still happening.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.