6

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

"Cypress command 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/components/Greeting';

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

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

My component - greeting.js

import React from 'react';

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

cypress\support\index.js

import './commands';
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 component (68ms)
    1) "after each" hook for "renders View Details component"


  1 passing (7s)
  1 failing

  1) react-testing-library "after each" hook for "renders View Details component":
     Error: Cypress command 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!

1 Answer 1

2

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

https://github.com/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 commands 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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.