JSX not supported in .js test bundles

[cowboyd]

I'm attempting to write a React component harness for BigTest in order to test the @stripes/components design system. My idea is that there will be a Mount() step that takes some JSX and then sends a message to the app that mounts that component:

import { test } from 'bigtest';
import { KeyValue as Interactor } from '@stripes/testing';
import { Mount } from './helpers';

export default test("KeyValue")
  .step(Mount((React, KeyValue) =>
    (<KeyValue
       data-test-foo="bar"
       label="Label"
       value="Value"
       subValue="subValue"
     />), "KeyValue"))
  .assertion(KeyValueInteractor("Label").exists());

This compiles into a function which, when passed to the render app takes the value of React and the KeyValue component and then returns the corresponding react component.

However, our current bundler doesn't support a custom babel config, so this is a syntax error. We need a way to extend the babel config in our bundler. If we can already do this, then we should document it.

See this repo for details:

https://github.com/cowboyd/stripes-components/tree/integrate-bigtest

[taras]

@cowboyd try .jsx

[cowboyd]

@taras sadly, that doesn't seem to work:

[manifest builder] build error:
Unexpected token (Note that you need plugins to import files that are not JavaScript)

[dagda1]

@cowboyd does this Mount function exist yet or is there a branch that is causing the error with the code in your previous comment?

[dagda1]

@cowboyd looking at the source code for @rollup/plugin-babel, it does search for a babelrc by default although if it finds a babel.config.js, that takes precedence.

It is a long time since I used babel. If possible, could you help me get a failing example?

[cowboyd]

@dagda1 I pushed the mount helper to this branch (I'd forgotten to check it in)

[dagda1]

@cowboyd many thanks. That is a big help

[dagda1]

@cowboyd I made progress on this.

The @rollup/plugin-babel does pick up a babel.config.js or a babelrc automatically and merges it with the config we currently have in the rollup config.

We currently have the rollup commonjs plugin in the wrong order in the plugins rollup config. I've created #689 to correct this.