ui5-webcomponents-sample-react icon indicating copy to clipboard operation
ui5-webcomponents-sample-react copied to clipboard

Set up tests after eject of the standard CRA

Open metil opened this issue 5 years ago • 0 comments

Hello Team,

I'm facing the following problem: Steps to reproduce:

  1. npx create-react-app </app_name>
  2. npm i -S @ui5/webcomponents-react
  3. Follow the instructions for the tests Set up Tests
  4. npm i -D enzyme enzyme-adapter-react-16
  5. setupTest.js looks like this:
import '@testing-library/jest-dom/extend-expect';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });
  1. App.js looks like this:
import React from 'react';

import '@ui5/webcomponents/dist/json-imports/i18n';

import '@ui5/webcomponents/dist/json-imports/Themes';
import '@ui5/webcomponents-fiori/dist/json-imports/Themes';

import './App.css';
import { Button, ShellBar, ThemeProvider } from '@ui5/webcomponents-react';

function App() {
  return (
    <div>
      <ThemeProvider withToastContainer>
        <ShellBar />
        <Button>Click Me!</Button>
      </ThemeProvider>
    </div>
  );
}

export default App;

  1. The test looks like this
import React from 'react';
import App from './App';
import { shallow } from 'enzyme'

test('renders learn react link', () => {
  let shallow1 = shallow(<App />);
});

So far so good the test starts with 100 warnings in the console about the i18n (by the way your app is also starting with them ui5-webcomponents-sample-react ) but the test is loaded and so on.

so you are a suggesting to eject from the standard CRA and to continue on our own and to add in the config/webpack.config.js the following in order to solve the warnings:

 {
              test: [/cldr\/.*\.json$/, /i18n\/.*\.json$/, /assets\/.*\.json$/],
              loader: 'file-loader',
              options: {
                name: 'static/media/[name].[hash:8].[ext]',
              },
              type: 'javascript/auto',
            }

so far so good the warnings are gone from the console and all the assets are now loaded fine. But the test is not working any mode I am getting the following error:

node_modules/@ui5/webcomponents/dist/json-imports/i18n.js:1 ({"Object.":function(module,exports,require,__dirname,__filename,global,jest){import { registerI18nBundle } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";

Which was solved before with Set up Tests

So please advice what I'm are doing wrong or what I'm missing in the whole configuration.

Thanks & Regards, Ivan

metil avatar Apr 13 '20 16:04 metil