I am using cypress and react-testing library in order to execute unit tests on my ponent. However, I am running into the the below error when the test executes

"Cypress mand timeout of '4000ms' exceeded."

I notice that the actual test that I have written succeeds. But there is an error in an "after all" hook that is somehow inserted. I do not have an "after all" hook in my test spec. I wanted to know where this could be invoked from since I do not have it in my code.

Additional Info: I am using webpack and istanbul plugins that are added in the plugins/index.js file

test-spec.js

import React from 'react';
import {render, fireEvent, cleanup} from '@testing-library/react';
import Greeting from '../../src/utils/testUtils/ponents/Greeting';

describe('react-testing-library', () => {   

    it('renders View Details ponent', () => {      
            const ponent = render(<Greeting />);
            ponent.getByText('Hello');
        })
})

My ponent - greeting.js

import React from 'react';

export default function Greeting() {
    return (
        <div>{'Hello'}</div>
    );
}

cypress\support\index.js

import './mands';
import '@cypress/code-coverage/support';

cypress\plugins\index.js

const webpack = require('@cypress/webpack-preprocessor')
const webpackOptions = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|mjs)$/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
          plugins: ['@babel/plugin-proposal-class-properties', 'istanbul'],
        },
      }
    ]
  }
}

const options = {
  // send in the options from your webpack.config.js, so it works the same
  // as your app's code
  webpackOptions,
  watchOptions: {}
}

module.exports = on => {
  on('file:preprocessor', webpack(options))
  on('task', require('@cypress/code-coverage/task'))

}

Below is the error that I get on the console

react-testing-library
    √ renders View Details ponent (68ms)
    1) "after each" hook for "renders View Details ponent"


  1 passing (7s)
  1 failing

  1) react-testing-library "after each" hook for "renders View Details ponent":
     Error: Cypress mand timeout of '4000ms' exceeded.

Because this error occurred during a 'after each' hook we are skipping all of the remaining tests.
      at http://localhost:4444/__cypress/runner/cypress_runner.js:82978:25

Because of this the tests fail. Any suggestions as to why this error could be happening would greatly help.

Thanks in advance!

I am using cypress and react-testing library in order to execute unit tests on my ponent. However, I am running into the the below error when the test executes

"Cypress mand timeout of '4000ms' exceeded."

I notice that the actual test that I have written succeeds. But there is an error in an "after all" hook that is somehow inserted. I do not have an "after all" hook in my test spec. I wanted to know where this could be invoked from since I do not have it in my code.

Additional Info: I am using webpack and istanbul plugins that are added in the plugins/index.js file

test-spec.js

import React from 'react';
import {render, fireEvent, cleanup} from '@testing-library/react';
import Greeting from '../../src/utils/testUtils/ponents/Greeting';

describe('react-testing-library', () => {   

    it('renders View Details ponent', () => {      
            const ponent = render(<Greeting />);
            ponent.getByText('Hello');
        })
})

My ponent - greeting.js

import React from 'react';

export default function Greeting() {
    return (
        <div>{'Hello'}</div>
    );
}

cypress\support\index.js

import './mands';
import '@cypress/code-coverage/support';

cypress\plugins\index.js

const webpack = require('@cypress/webpack-preprocessor')
const webpackOptions = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|mjs)$/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
          plugins: ['@babel/plugin-proposal-class-properties', 'istanbul'],
        },
      }
    ]
  }
}

const options = {
  // send in the options from your webpack.config.js, so it works the same
  // as your app's code
  webpackOptions,
  watchOptions: {}
}

module.exports = on => {
  on('file:preprocessor', webpack(options))
  on('task', require('@cypress/code-coverage/task'))

}

Below is the error that I get on the console

react-testing-library
    √ renders View Details ponent (68ms)
    1) "after each" hook for "renders View Details ponent"


  1 passing (7s)
  1 failing

  1) react-testing-library "after each" hook for "renders View Details ponent":
     Error: Cypress mand timeout of '4000ms' exceeded.

Because this error occurred during a 'after each' hook we are skipping all of the remaining tests.
      at http://localhost:4444/__cypress/runner/cypress_runner.js:82978:25

Because of this the tests fail. Any suggestions as to why this error could be happening would greatly help.

Thanks in advance!

• javascript
• reactjs
• unit-testing
• cypress
• react-testing-library

1 Answer 1

With some help from the cypress munity, it seems as though the react-testing-library is adding the after each hook for clean up.

https://github./testing-library/react-testing-library/blob/master/src/index.js

This is an async method which results in cypress giving a warning :

cypress_runner.js:85235 Cypress Warning: Cypress detected that you returned a promise in a test, but also invoked one or more cy mands inside of that promise.

I was able to prevent this addition of the afterEach and get the tests working. We can use any one of the methods given here to achieve this.