search

fwouts / react-screenshot-test

A dead simple library to screenshot test React components
https://www.npmjs.com/package/react-screenshot-test
MIT License
618 stars 24 forks source link

Async Callback Timeout Error #178

Closed garmeeh closed 4 years ago

garmeeh commented 4 years ago

Hey 👋 library looks great. I am just trying to get a simple example spun up and having issues.

I get the following error:

> jest -c jest.screenshot.config.js

 FAIL  components/Button/__tests__/ button.screenshot.tsx (20.439s)
  Button
    Desktop
      ✕ with label (5005ms)
      ✕ no label (5002ms)
    iPhone X
      ✕ with label (5002ms)
      ✕ no label (5006ms)

  ● Button › Desktop › with label

    : Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Error:

      at new Spec (node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22)
      at Suite.<anonymous> (node_modules/react-screenshot-test/dist/lib/react/ReactScreenshotTest.js:124:25)

  ● Button › Desktop › no label

    : Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Error:

      at new Spec (node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22)
      at Suite.<anonymous> (node_modules/react-screenshot-test/dist/lib/react/ReactScreenshotTest.js:124:25)

  ● Button › iPhone X › with label

    : Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Error:

      at new Spec (node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22)
      at Suite.<anonymous> (node_modules/react-screenshot-test/dist/lib/react/ReactScreenshotTest.js:124:25)

  ● Button › iPhone X › no label

    : Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Error:

      at new Spec (node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22)
      at Suite.<anonymous> (node_modules/react-screenshot-test/dist/lib/react/ReactScreenshotTest.js:124:25)

Test looks like:

import React from 'react';
import { ReactScreenshotTest } from 'react-screenshot-test';

ReactScreenshotTest.create('Button')
  .viewport('Desktop', {
    width: 1024,
    height: 768,
  })
  .viewport('iPhone X', {
    width: 375,
    height: 812,
    deviceScaleFactor: 3,
    isMobile: true,
    hasTouch: true,
    isLandscape: false,
  })
  .shoot('with label', <div>Hello</div>)
  .shoot('no label', <div>No</div>)
  .run();

and I am using the config you give in the documentation.

fwouts commented 4 years ago

Thank you for the bug report @garmeeh.

Could you please tell me:

garmeeh commented 4 years ago

Sure no problem:

> SCREENSHOT_MODE=local jest -c jest.screenshot.config.js

 FAIL  components/Button/__tests__/ button.screenshot.tsx (20.475s)
  Button
    Desktop
      ✕ with label (5008ms)
      ✕ no label (5004ms)
    iPhone X
      ✕ with label (5003ms)
      ✕ no label (5003ms)

  ● Button › Desktop › with label

    : Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Error:

      at new Spec (node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22)
      at Suite.<anonymous> (node_modules/react-screenshot-test/dist/lib/react/ReactScreenshotTest.js:124:25)

  ● Button › Desktop › no label

    : Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Error:

      at new Spec (node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22)
      at Suite.<anonymous> (node_modules/react-screenshot-test/dist/lib/react/ReactScreenshotTest.js:124:25)

  ● Button › iPhone X › with label

    : Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Error:

      at new Spec (node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22)
      at Suite.<anonymous> (node_modules/react-screenshot-test/dist/lib/react/ReactScreenshotTest.js:124:25)

  ● Button › iPhone X › no label

    : Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Error:

      at new Spec (node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22)
      at Suite.<anonymous> (node_modules/react-screenshot-test/dist/lib/react/ReactScreenshotTest.js:124:25)

Test Suites: 1 failed, 1 total
Tests:       4 failed, 4 total
Snapshots:   0 total
Time:        20.518s, estimated 21s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! dsch-frontend-template@1.0.0 testscreen: `SCREENSHOT_MODE=local jest -c jest.screenshot.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the dsch-frontend-template@1.0.0 testscreen script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/garymeehan/.npm/_logs/2020-03-14T22_57_06_755Z-debug.log
fwouts commented 4 years ago

Could you try adding the following right after your import statements?

jest.setTimeout(60000);

It may just be that your machine is a bit slow :)

garmeeh commented 4 years ago

Still no joy. I tried this with and without local only flag set.

I also tried updating Docker to the latest and it had the same result.

The Mac shouldn't have an issue with running it, so it might not be that 🤔

fwouts commented 4 years ago

Do you use Docker Desktop on Mac, or Docker Toolbox? See https://docs.docker.com/docker-for-mac/docker-toolbox/ for reference.

For reference, I use Docker Desktop on Mac. I ask because there's a hardcoded assumption that the host host.docker.internal will be accessible from within the Docker container, and that may not be the case with Docker Toolbox (I haven't tested).

However, that wouldn't explain why it doesn't work with export SCREENSHOT_MODE=local (that one should work even if Docker isn't installed at all).

It sounds like we'd benefit from introducing some debug logging!

garmeeh commented 4 years ago

I use Docker Desktop also.

I cloned this this repo and interestingly within the examples directory if I install and run yarn screenshot-test-local it passes. Same is true for the main project.

Comparing to my project the only difference is that my Jest file is .tsx.

But, I changed it to .js and the same result.

garmeeh commented 4 years ago

I created a fresh hello world project and was able to get react-screenshot-test to run. So the problem is more than likely on my end. I will see can I debug it further and will let you know how I get on.

To help narrow it down, do you reckon there are any packages that might interfere with it?

fwouts commented 4 years ago

Apologies for the delay. There is some dodgy stuff in react-screenshot-test when it comes to some dependencies, in particular styled-components. I can say it's dodgy, because I wrote it :)

Do you have a dependency on styled-components? If so, are you using the latest major version (v5)?

For context: the reason why this dependency isn't explicitly declared in dependencies in the package.json is that it could be unreasonable to add a dependency on styled-components for everyone that uses react-screenshot-test, even if they don't use it. However, if that actually causes issues such as yours, then we should revisit that decision! Better to have a bigger package rather than bugs. A proper approach would probably be to split it up into multiple smaller NPM packages, but that's not necessarily easy :)

The other dependency that isn't explicitly declared is puppeteer, but that's not used when using Docker.

renanborgez commented 4 years ago

Hey guys, I had the SAME problem on my side In my case I had some things happening in my setupFilesAfterEnv although it works with my regular jest tests

After removing it from my jest.screenshot.config.js the timeout stop to happen. So I tried to create a separate file for setupFilesAfterEnv cleaning the functions and logic not used by the screenshot testing, and so it back to work.

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

garmeeh commented 4 years ago

Hey @fwouts, apologies in the delay on getting back. Things got a little crazy there for a while.

Just re-testing this now and still getting the error.

I am using styled-components. I tried running it with Styled Components 5.0.1 and again with 5.1.0 with no joy.

And just to confirm. My config is:

module.exports = {
  testEnvironment: 'node',
  globalSetup: 'react-screenshot-test/global-setup',
  globalTeardown: 'react-screenshot-test/global-teardown',
  testMatch: ['**/?(*.)+(screenshot).[jt]s?(x)'],
  transform: {
    '^.+\\.[t|j]sx?$': 'babel-jest', // or ts-jest
    '^.+\\.module\\.css$': 'react-screenshot-test/css-modules-transform',
    '^.+\\.css$': 'react-screenshot-test/css-transform',
    '^.+\\.scss$': 'react-screenshot-test/sass-transform',
    '^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      'react-screenshot-test/asset-transform',
  },
  transformIgnorePatterns: ['node_modules/.+\\.js'],
};

It's strange that in my existing project it will not run, how ever in the hello world one I created it does.

garmeeh commented 4 years ago

Might be worth sharing my apps dependencies:

"dependencies": {
    "app-root-path": "^3.0.0",
    "axios": "^0.19.2",
    "compression": "^1.7.4",
    "core-js": "2.6.0",
    "express": "^4.17.1",
    "foundation-sites": "^6.6.1",
    "intersection-observer": "^0.7.0",
    "morgan": "^1.9.1",
    "next": "^9.3.0",
    "next-offline": "^5.0.0",
    "node-sass": "^4.13.1",
    "picturefill": "^3.0.3",
    "prom-client": "^12.0.0",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-modal": "^3.11.2",
    "styled-components": "^5.1.0",
    "typescript": "^3.8.3",
    "winston": "^3.2.1"
  },
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/preset-react": "^7.8.3",
    "@cypress/code-coverage": "^1.12.2",
    "@dsch/eslint-rules": "^1.1.0",
    "@storybook/addon-a11y": "^5.3.14",
    "@storybook/addon-actions": "^5.3.14",
    "@storybook/addon-knobs": "^5.3.14",
    "@storybook/addon-links": "^5.3.14",
    "@storybook/addon-viewport": "^5.3.14",
    "@storybook/addons": "^5.3.14",
    "@storybook/react": "^5.3.14",
    "@testing-library/dom": "^6.15.0",
    "@testing-library/jest-dom": "^5.1.1",
    "@testing-library/react": "^9.5.0",
    "@types/express": "^4.17.3",
    "@types/jest": "^25.1.3",
    "@types/lodash.throttle": "^4.1.6",
    "@types/node": "^13.7.7",
    "@types/raven": "^2.5.3",
    "@types/react": "^16.9.23",
    "@types/react-dom": "^16.9.5",
    "@types/react-modal": "^3.10.5",
    "@types/styled-components": "^5.1.0",
    "babel-jest": "^25.1.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-istanbul": "^6.0.0",
    "babel-plugin-module-resolver": "^4.0.0",
    "babel-plugin-styled-components": "^1.10.7",
    "cypress": "^4.1.0",
    "eslint": "^6.8.0",
    "eslint-plugin-prettier": "^3.1.2",
    "fork-ts-checker-webpack-plugin": "^4.0.5",
    "http-server": "^0.12.1",
    "husky": "^4.2.3",
    "istanbul-lib-coverage": "^3.0.0",
    "jest": "^25.1.0",
    "jest-mock-axios": "^3.2.0",
    "jest-styled-components": "^7.0.0",
    "lint-staged": "^10.0.8",
    "mountebank": "^2.2.0",
    "nodemon": "^2.0.2",
    "npm-run-all": "^4.1.5",
    "nyc": "^15.0.0",
    "prettier": "^1.19.1",
    "react-screenshot-test": "^2.0.4",
    "stop-only": "^3.1.0",
    "ts-node": "^8.6.2",
    "webpack-bundle-analyzer": "^3.6.0"
  }
fwouts commented 4 years ago

@garmeeh Could I see your Babel config, if you have one?

garmeeh commented 4 years ago

@fwouts sure no problem:

{
  "env": {
    "development": {
      "presets": ["next/babel"],
      "plugins": [
        [
          "babel-plugin-styled-components",
          {
            "ssr": true,
            "displayName": true
          }
        ]
      ]
    },
    "production": {
      "presets": ["next/babel"],
      "plugins": [
        [
          "babel-plugin-styled-components",
          {
            "ssr": true,
            "displayName": true
          }
        ]
      ]
    },
    "test": {
      "presets": ["next/babel"],
      "plugins": [
        [
          "babel-plugin-styled-components",
          {
            "ssr": true,
            "displayName": true
          }
        ]
      ]
    },
    "e2e": {
      "presets": ["next/babel"],
      "plugins": [
        "istanbul",
        [
          "babel-plugin-styled-components",
          {
            "ssr": true,
            "displayName": true
          }
        ]
      ]
    }
  }
}
fwouts commented 4 years ago

Hi @garmeeh. I still don't know what's going on, but v2.0.5 has a ton of debug logging which should help. Would you mind trying it out?

You'll just need to set the SCREENSHOT_LOGGING_LEVEL environment variable to "debug". Try running a single test, to make sure the output is easy to read through :)

garmeeh commented 4 years ago

I simplified the test:

import React from 'react';
import { ReactScreenshotTest } from 'react-screenshot-test';

ReactScreenshotTest.create('Button')
  .viewport('Desktop', {
    width: 1024,
    height: 768,
  })
  .shoot('hello', <div>Hello</div>)
  .run();

This is the output:

> SCREENSHOT_LOGGING_LEVEL=debug jest -c jest.screenshot.config.js

Determining test suites to run...[DEBUG:global-setup] Screenshot server setup initiated.
[DEBUG:global-setup] Creating screenshot server.
[DEBUG:global-setup] Screenshot server instance created.
[DEBUG:global-setup] Starting screenshot server.
[DEBUG:DockerizedScreenshotServer] DockerizedScreenshotServer.start() initiated.
[DEBUG:DockerizedScreenshotServer] Ensuring that Docker image is present.
[DEBUG:DockerizedScreenshotServer] Removing any old Docker containers.
[DEBUG:DockerizedScreenshotServer] Starting Docker container.
Docker container output:
[DEBUG:LocalScreenshotServer] start() initiated.

Docker container output:
[DEBUG:LocalScreenshotServer] Starting renderer.
[DEBUG:PuppeteerScreenshotRenderer] start() initiated.
[DEBUG:PuppeteerScreenshotRenderer] Launching Chrome browser.

Docker container output:
[DEBUG:PuppeteerScreenshotRenderer] Chrome browser launched.
[DEBUG:LocalScreenshotServer] Renderer started.
[DEBUG:LocalScreenshotServer] Attempting to listen on port 3000.

Docker container output:
[DEBUG:LocalScreenshotServer] Successfully listening on port 3000.

Docker container output:
Ready.

[DEBUG:DockerizedScreenshotServer] Docker container started.
[DEBUG:global-setup] Screenshot server started.
  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] start() initiated.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Attempting to listen on port 57129.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Successfully listening on port 57129.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactScreenshotTest] Requesting component server to generate screenshot: Button - Desktop - hello

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] serve() initiated with node ID: 2db78435-72d3-4445-ad57-2664c73184d2

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Storing node.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Rendering node.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactScreenshotTest] Initiating request to screenshot server at http://localhost:3038.

 FAIL  ./ button.screenshot.js (6.073s)
  Button
    Desktop
      ✕ hello (5006ms)

  ● Button › Desktop › hello

    : Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Error:

      at new Spec (node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22)
      at Suite.<anonymous> (node_modules/react-screenshot-test/dist/lib/react/ReactScreenshotTest.js:126:25)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        6.135s, estimated 22s
Ran all test suites.
[DEBUG:global-teardown] Screenshot server teardown initiated.
[DEBUG:global-teardown] Stopping screenshot server.
[DEBUG:DockerizedScreenshotServer] DockerizedScreenshotServer.stop() initiated.
[DEBUG:DockerizedScreenshotServer] Killing Docker container.
  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] stop() initiated.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Attempting to shutdown server.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Successfully shutdown server.

[DEBUG:DockerizedScreenshotServer] Docker container killed.
[DEBUG:DockerizedScreenshotServer] Removing Docker container.
[DEBUG:DockerizedScreenshotServer] Docker container removed.
[DEBUG:global-teardown] Screenshot server stopped.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! dsch-frontend-template@1.0.0 testscreen: `SCREENSHOT_LOGGING_LEVEL=debug jest -c jest.screenshot.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the dsch-frontend-template@1.0.0 testscreen script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/garymeehan/.npm/_logs/2020-04-28T15_17_35_383Z-debug.log
fwouts commented 4 years ago

OK, this is progress! It looks like the Docker container isn't receiving the request at all. Would you mind trying the same with SCREENSHOT_MODE=local?

My current hypothesis is that it's caused by jest-mock-axios, which would effectively block the communication (since we use Axios to make the request to the screenshot server).

garmeeh commented 4 years ago

This is the output from local: 

> SCREENSHOT_LOGGING_LEVEL=debug SCREENSHOT_MODE=local jest -c jest.screenshot.config.js

Determining test suites to run...[DEBUG:global-setup] Screenshot server setup initiated.
[DEBUG:global-setup] Creating screenshot server.
[DEBUG:global-setup] Screenshot server instance created.
[DEBUG:global-setup] Starting screenshot server.
[DEBUG:LocalScreenshotServer] start() initiated.
[DEBUG:LocalScreenshotServer] Starting renderer.
[DEBUG:PuppeteerScreenshotRenderer] start() initiated.
[DEBUG:PuppeteerScreenshotRenderer] Launching Chrome browser.
[DEBUG:PuppeteerScreenshotRenderer] Chrome browser launched.
[DEBUG:LocalScreenshotServer] Renderer started.
[DEBUG:LocalScreenshotServer] Attempting to listen on port 3038.
[DEBUG:LocalScreenshotServer] Successfully listening on port 3038.
[DEBUG:global-setup] Screenshot server started.
  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] start() initiated.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Attempting to listen on port 50349.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Successfully listening on port 50349.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactScreenshotTest] Requesting component server to generate screenshot: Button - Desktop - hello

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] serve() initiated with node ID: c53b2310-7ee5-4707-ad97-369a83cb549e

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Storing node.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Rendering node.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactScreenshotTest] Initiating request to screenshot server at http://localhost:3038.

 FAIL  ./ button.screenshot.js (5.63s)
  Button
    Desktop
      ✕ hello (5007ms)

  ● Button › Desktop › hello

    : Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Error:

      at new Spec (node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22)
      at Suite.<anonymous> (node_modules/react-screenshot-test/dist/lib/react/ReactScreenshotTest.js:126:25)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        5.694s, estimated 7s
Ran all test suites.
[DEBUG:global-teardown] Screenshot server teardown initiated.
[DEBUG:global-teardown] Stopping screenshot server.
[DEBUG:LocalScreenshotServer] stop() initiated.
[DEBUG:LocalScreenshotServer] Attempting to shutdown server.
[DEBUG:LocalScreenshotServer] Successfully shutdown server.
[DEBUG:LocalScreenshotServer] Stopping renderer.
[DEBUG:PuppeteerScreenshotRenderer] stop() initiated.
[DEBUG:PuppeteerScreenshotRenderer] Closing Chrome browser.
[DEBUG:PuppeteerScreenshotRenderer] Chrome browser closed.
[DEBUG:LocalScreenshotServer] Renderer stopped.
[DEBUG:global-teardown] Screenshot server stopped.
  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] stop() initiated.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Attempting to shutdown server.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Successfully shutdown server.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! dsch-frontend-template@1.0.0 testscreen: `SCREENSHOT_LOGGING_LEVEL=debug SCREENSHOT_MODE=local jest -c jest.screenshot.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the dsch-frontend-template@1.0.0 testscreen script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/garymeehan/.npm/_logs/2020-04-29T08_59_50_098Z-debug.log

To test your theory, I uninstalled jest-mock-axios and here are the results for local and docker.

Local:

> SCREENSHOT_LOGGING_LEVEL=debug SCREENSHOT_MODE=local jest -c jest.screenshot.config.js

Determining test suites to run...[DEBUG:global-setup] Screenshot server setup initiated.
[DEBUG:global-setup] Creating screenshot server.
[DEBUG:global-setup] Screenshot server instance created.
[DEBUG:global-setup] Starting screenshot server.
[DEBUG:LocalScreenshotServer] start() initiated.
[DEBUG:LocalScreenshotServer] Starting renderer.
[DEBUG:PuppeteerScreenshotRenderer] start() initiated.
[DEBUG:PuppeteerScreenshotRenderer] Launching Chrome browser.
[DEBUG:PuppeteerScreenshotRenderer] Chrome browser launched.
[DEBUG:LocalScreenshotServer] Renderer started.
[DEBUG:LocalScreenshotServer] Attempting to listen on port 3038.
[DEBUG:LocalScreenshotServer] Successfully listening on port 3038.
[DEBUG:global-setup] Screenshot server started.
  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] start() initiated.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Attempting to listen on port 52372.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Successfully listening on port 52372.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactScreenshotTest] Requesting component server to generate screenshot: Button - Desktop - hello

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] serve() initiated with node ID: eddeb14e-fb6d-4b7f-8586-1312f4e2751b

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Storing node.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Rendering node.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactScreenshotTest] Initiating request to screenshot server at http://localhost:3038.

[DEBUG:PuppeteerScreenshotRenderer] render() invoked with (name = Button - Desktop - hello, url = http://localhost:52372/render/eddeb14e-fb6d-4b7f-8586-1312f4e2751b).
  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Received request to render node eddeb14e-fb6d-4b7f-8586-1312f4e2751b.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Initiating render with styled-components.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactScreenshotTest] Response received with status code 200.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Node rendered.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Deleting node.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactScreenshotTest] Screenshot generated.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactScreenshotTest] Comparing screenshot.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactScreenshotTest] Screenshot compared.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] stop() initiated.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Attempting to shutdown server.

 PASS  ./ button.screenshot.js (5.596s)
  Button
    Desktop
      ✓ hello (473ms)

 › 1 snapshot written.
Snapshot Summary
 › 1 snapshot written from 1 test suite.

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 written, 1 total
Time:        5.645s
Ran all test suites.
[DEBUG:global-teardown] Screenshot server teardown initiated.
[DEBUG:global-teardown] Stopping screenshot server.
[DEBUG:LocalScreenshotServer] stop() initiated.
[DEBUG:LocalScreenshotServer] Attempting to shutdown server.
[DEBUG:LocalScreenshotServer] Successfully shutdown server.
[DEBUG:LocalScreenshotServer] Stopping renderer.
[DEBUG:PuppeteerScreenshotRenderer] stop() initiated.
[DEBUG:PuppeteerScreenshotRenderer] Closing Chrome browser.
[DEBUG:PuppeteerScreenshotRenderer] Chrome browser closed.
[DEBUG:LocalScreenshotServer] Renderer stopped.
[DEBUG:global-teardown] Screenshot server stopped.
  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Successfully shutdown server.

Docker: 

> SCREENSHOT_LOGGING_LEVEL=debug jest -c jest.screenshot.config.js

Determining test suites to run...[DEBUG:global-setup] Screenshot server setup initiated.
[DEBUG:global-setup] Creating screenshot server.
[DEBUG:global-setup] Screenshot server instance created.
[DEBUG:global-setup] Starting screenshot server.
[DEBUG:DockerizedScreenshotServer] DockerizedScreenshotServer.start() initiated.
[DEBUG:DockerizedScreenshotServer] Ensuring that Docker image is present.
[DEBUG:DockerizedScreenshotServer] Removing any old Docker containers.
[DEBUG:DockerizedScreenshotServer] Starting Docker container.
Docker container output:
[DEBUG:LocalScreenshotServer] start() initiated.

Docker container output:
[DEBUG:LocalScreenshotServer] Starting renderer.
[DEBUG:PuppeteerScreenshotRenderer] start() initiated.
[DEBUG:PuppeteerScreenshotRenderer] Launching Chrome browser.

Docker container output:
[DEBUG:PuppeteerScreenshotRenderer] Chrome browser launched.
[DEBUG:LocalScreenshotServer] Renderer started.
[DEBUG:LocalScreenshotServer] Attempting to listen on port 3000.

Docker container output:
[DEBUG:LocalScreenshotServer] Successfully listening on port 3000.
Ready.

[DEBUG:DockerizedScreenshotServer] Docker container started.
[DEBUG:global-setup] Screenshot server started.
  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] start() initiated.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Attempting to listen on port 53228.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Successfully listening on port 53228.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactScreenshotTest] Requesting component server to generate screenshot: Button - Desktop - hello

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] serve() initiated with node ID: 2c6ea81e-b8ea-407a-b411-095017e5119d

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Storing node.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Rendering node.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactScreenshotTest] Initiating request to screenshot server at http://localhost:3038.

Docker container output:
[DEBUG:PuppeteerScreenshotRenderer] render() invoked with (name = Button - Desktop - hello, url = http://host.docker.internal:53228/render/2c6ea81e-b8ea-407a-b411-095017e5119d).

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Received request to render node 2c6ea81e-b8ea-407a-b411-095017e5119d.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Initiating render with styled-components.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactScreenshotTest] Response received with status code 200.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Node rendered.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Deleting node.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactScreenshotTest] Screenshot generated.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactScreenshotTest] Comparing screenshot.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactScreenshotTest] Screenshot compared.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] stop() initiated.

  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Attempting to shutdown server.

 PASS  ./ button.screenshot.js (5.542s)
  Button
    Desktop
      ✓ hello (295ms)

 › 1 snapshot written.
Snapshot Summary
 › 1 snapshot written from 1 test suite.

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 written, 1 total
Time:        5.582s, estimated 6s
Ran all test suites.
[DEBUG:global-teardown] Screenshot server teardown initiated.
[DEBUG:global-teardown] Stopping screenshot server.
[DEBUG:DockerizedScreenshotServer] DockerizedScreenshotServer.stop() initiated.
[DEBUG:DockerizedScreenshotServer] Killing Docker container.
  console.log node_modules/react-screenshot-test/dist/lib/logger.js:8
    [DEBUG:ReactComponentServer] Successfully shutdown server.

[DEBUG:DockerizedScreenshotServer] Docker container killed.
[DEBUG:DockerizedScreenshotServer] Removing Docker container.
[DEBUG:DockerizedScreenshotServer] Docker container removed.
[DEBUG:global-teardown] Screenshot server stopped.

Do you have any recommendations on how these can work along side each other? I was looking over the docs in jest-mock-axios to see if there was a way to allow some requests through but could not see anything on it.

fwouts commented 4 years ago

OK, we're making progress. I figure this is happening automatically because Jest loads all mocks from the __mocks__.

I can think of two options: 1) Set roots to a directory subset that doesn't include __mocks__ so that Jest doesn't pick it up (not sure if that would work, see https://jestjs.io/docs/en/configuration#roots-arraystring for more info) 2) Stop using Axios in react-screenshot-test. I'll probably do this either way.

Would you be able to try out option 1?

garmeeh commented 4 years ago

Hey @fwouts, so I can confirm that option 1 works 😄

To test I moved the sample test file to a new directory named screens and then just added:

roots: ['<rootDir>/screens/'],

to the jest.screenshot.config.js

Sounds like this is a workable solution for now. Thanks for all the support on it.

fwouts commented 4 years ago

@garmeeh v2.0.6 is out, you should now be able to get rid of the workaround. Let me know how it works!

garmeeh commented 4 years ago

@fwouts 🙌 That worked a treat. Thanks for the update.