How to test with React

[gabriele-giambonini]

Please only report technical bugs. Clarify design issues in the slack channel #ux-ui-support.

As long as an AXA Pattern Library component is involved in a React test, it will fail.

Expected Behavior

Writing tests for component should be possible.

Current Behavior

An error message like

    SyntaxError: Cannot use import statement outside a module

      1 | import { createElement } from 'react';
    > 2 | import createAXAButtonReact from '@axa-ch/button/lib/index.react';
        | ^
      3 |
      4 | const Button = createAXAButtonReact(createElement);
      5 |

Steps to Reproduce

1. Create a react application with npx create-react-app myapp
2. Import the AXA-Button in package.json

   "dependencies": {
   ...
   "@axa-ch/button": "6.0.25",
   ...

3. Create a react component for AXA-Button, Button.js

   
   import { createElement } from 'react';
   import createAXAButtonReact from '@axa-ch/button/lib/index.react';

const Button = createAXAButtonReact(createElement);

export default Button;

5. Use the button in `App.js`
```jsx
...
import Button from './Button';
...
<Button>Click me</Button>
...

7. Run App.test.js, the SyntaxError: Cannot use import statement outside a module error message is shown.

Context (Environment)

Possible Solution

[MarekLacoAXA]

@gabriele-giambonini I don't think this is a PL issue. I think your App.js is maybe missing an export statement. And your testing library may not support yet ES6 modules.

[MKaHead]

@gabriele-giambonini The text can currently be found in the readme. I will also post documentation on Storybook in the near future. here