React Tests fail inside Docker

[SSaiPrasad7]

Hello @loki team,
I had cloned Loki repo in docker container and started testing for react examples. I had some errors while running following commands:

root@041fe40155d2:/workspace/examples/react# yarn test
yarn run v1.22.5
$ loki
loki test v0.28.1
 FAIL  chrome.docker
       Starting
       Timed out waiting for: tcp:172.17.0.2:35799
Some visual tests failed to run
error Command failed with exit code 1.

root@041fe40155d2:/workspace/examples/react# yarn test-ci
yarn run v1.22.5
$ build-storybook
info @storybook/react v6.1.17
info 
info => Cleaning outputDir /workspace/examples/react/storybook-static
info => Using prebuilt manager
info => Building preview..
info => Loading preview config..
info => Loading presets
info => Loading 1 config file in "./.storybook"
info => Loading 7 other files in "./.storybook"
info => Adding stories defined in ".storybook/main.js"
info => Loading Webpack configuration from `../../node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack setup
info => Compiling preview..
info => Preview built (1.67 min)
WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
WARN This can impact web performance.
WARN Assets: 
WARN   vendors~main.2d0e54bd95cc357c3cb2.bundle.js (2.58 MiB)
WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
WARN Entrypoints:
WARN   main (2.65 MiB)
WARN       runtime~main.2d0e54bd95cc357c3cb2.bundle.js
WARN       vendors~main.2d0e54bd95cc357c3cb2.bundle.js
WARN       static/css/main.ca1ec2e8.chunk.css
WARN       main.2d0e54bd95cc357c3cb2.bundle.js
WARN 
WARN webpack performance recommendations: 
WARN You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
WARN For more info visit https://webpack.js.org/guides/code-splitting/
info => Output directory: /workspace/examples/react/storybook-static
$ loki --requireReference --reactUri file:./storybook-static
loki test v0.28.1
 FAIL  chrome.docker
       Starting
       Timed out waiting for: tcp:172.17.0.2:43849
Some visual tests failed to run
error Command failed with exit code 1.

root@041fe40155d2:/workspace/examples/react# yarn build
yarn run v1.22.5
$ react-scripts build
Creating an optimized production build...
Failed to compile.

src/App.js
  Line 6:5:    'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 7:7:    'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 8:9:    'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 9:9:    'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 10:16:  'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 12:9:   'React' must be in scope when using JSX  react/react-in-jsx-scope

Search for the keywords to learn more about each error.
error Command failed with exit code 1.

Please help me to resolve these errors.
Thank you and All the best

[techeverri]

Hey @saiprasadsamudrala 👋

You don't need to clone or run Loki inside a Docker container.

If you want to run Loki's React example locally follow the instructions below:

• Make sure you have the latest version of Docker installed and running
  🔗 https://www.docker.com/products/docker-desktop
• Run the commands from the Development section
  🔗 https://github.com/oblador/loki#development
• Enjoy! 💯

[sumitnegi7]

@techeverri It is running tests successfully in CI that's not an issue tests are not running in a docker container.There timeout-error is thrown

[techeverri]

tests are not running in a docker container. There timeout-error is thrown

Where is the Docker container running if not in CI?

[sumitnegi7]

@techeverri In the local machine we are trying to run it inside of a container.

[techeverri]

Loki already runs the test inside a Docker container locally when the target is configured as chrome.docker
🔗 https://loki.js.org/configuration.html#configurations

Running the entire setup inside a Docker container locally doesn't make much sense. Try using the chrome.docker target to run the test locally.

The issue you're facing is because of running Docker inside Docker and is outside the scope of Loki.

[SSaiPrasad7]

@techeverri I had worked docker inside docker with Loki repo. It worked pretty well earlier but now it is showing timeout error when running tests.
This is the result I captured at that time by running the command: yarn test-ci: