react-screenshot-test: Async Callback Timeout Error

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.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 1
Comments: 22 (9 by maintainers)

Commits related to this issue

Add plenty of debug logging, enabled with SCREENSHOT_LOGGING_LEVEL=debug This should help debug #178. — committed to fwouts/react-screenshot-test by fwouts 4 years ago
Add debug logging for Docker container This should help debug #178. — committed to fwouts/react-screenshot-test by fwouts 4 years ago

Most upvoted comments

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

garmeeh on Apr 30, 2020

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.

garmeeh on Apr 29, 2020

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 on Apr 21, 2020

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.

renanborgez on Mar 20, 2020