React compiler source maps incompatible with jest

[m-ttriley]

Describe the bug

We are using NPM to ingest our organizations bit components (e.g this is a consumer repo where components are ejected). Inside this consumer repo, we are using jest to run tests.

Now - when testing components in our consumer repository that import items from our bit library, we receive the following error upon any form of logging in our component:

SyntaxError: Unexpected token ; in JSON at position 0
        at JSON.parse (<anonymous>)
      at Object.parseSourceMapInput (node_modules/jest-runner/node_modules/source-map/lib/util.js:433:15)

Upon further digging, we found that this was being triggered inside jest's prepareStackTrace function.

Meaning that, during logging, jest will go and parse the source mapping for our bit component. Over in our bit component library, we have noticed that upon running bit build, the COMPONENT/dist/COMPONENT_FILE.js.map looks something like this:

;;;;;;;;;;;;AAAA

Whereas a normal source map would look more like a regular JSON object, something like:

"{"version":3,"sources":["../src/mount.js"],"names":["mount","node","options","ReactWrapper"],"mappings":";;;;;qBAQwBA,K;;AARxB;;;;;;AAEA;;;;;;AAMe,SAASA,KAAT,CAAeC,IAAf,EAAqBC,OAArB,EAA8B;AAC3C,SAAO,IAAIC,yBAAJ,CAAiBF,IAAjB,EAAuB,IAAvB,EAA6BC,OAA7B,CAAP;AACD","file":"mount.js","sourcesContent":["import ReactWrapper from './ReactWrapper';\n\n/**\n * Mounts and renders a react component into the document and provides a testing wrapper around it.\n *\n * @param node\n * @returns {ReactWrapper}\n */\nexport default function mount(node, options) {\n  return new ReactWrapper(node, null, options);\n}\n"]}"

Is this the expected output of the react compiler?

Steps to Reproduce

1. Create a bit component that logs something (for example, a warning when a prop isnt passed), build it with bit.envs/compilers/react

import React from 'react';

const BitComponent = (props) => {
  if (!props.name) {
    console.warn('missing prop: name');
  }
  return <div>{props.name}</div> 
}

export default BitComponent

2. Export it to your library

3. NPM install this component into another repository

4. Create a react component that imports this bit component:

ConsumerComponent.jsx:

import React from 'react';
import BitComponent from '@bit/my-org.collection.bit-component';

const ConsumerComponent = () => {
  return <div><BitComponent /></div>;
}

export default ConsumerComponent;

5. Attempt to perform a simple test:

ConsumerComponent.spec.js:

import React from 'react';
import ConsumerComponent from 'components/ConsumerComponent.jsx';
import { mount } from 'enzyme';

describe('ConsumerComponent', () => {
  let wrapper;
  beforeEach(() => {
    wrapper = mount(<ConsumerComponent />);
  })

  it('should mount without crashing', () => {
    expect(wrapper.exists()).toBe(true);
  })
});

Expected Behavior

Test passes, console warn statement prints.

Specifications

• Bit version: 14.7.6
• Node version: 10.8.0
• npm / yarn version: 6.2.0
• Platform: React.js
• Compiler / Tester (include version): compilers/[email protected]

[molin90]

Same problem, I don't know what to do

[kazlauskis]

One thing that has helped me was to babel transform the components.

  "transform": {
    "^.+\\.js$": "babel-jest"
  },
  "transformIgnorePatterns": ["node_modules/(?!@bit)"]

Alternatively, deleting the map files also works find node_modules/@bit -name '*.map' -delete

[elskhn]

Did you ever figure out a solution for this?