'warning from test with jasmine and react testing library

I started a project in react and I implemented some tests (first time I ever did test) using jasmine and react-testing-library (they are not useful for the moment, I did them just to check that the dependencies needed for my project were working well).

Nevertheless I have a warning that I can't understand when I run the command to do my tests (npm run test and in my scripts in package.json I have: "test": "cross-env NODE_ENV=test jasmine").

The warning is: Warning: The current testing environment is not configured to support act(...).

I made an express server mock in my frontend test part because otherwise I had an error, indeed the frontend was trying to connect to my real backend which was not launched. But I don't think that this warning is due to that implementation.

I put a part of my code here, tell me if I have to fill something else to be clearer.

Component that I am testing :

import * as React from "react";
import Axios from "axios";
import AnyComponent from "../any-component/AnyComponent";
import { AnyData } from "../../interface/AnyInterface"

interface IProps {
}

interface IState {
  loading: boolean | undefined,
  anyTestData: AnyData | undefined
}

const URL_FETCH = 'http://localhost:9000/getAnySession/anySession'; 

export default class Home extends React.Component <IProps, IState> {
  constructor (props: IProps){
    super(props);
    this.state = {
      loading: true,
      anyTestData: {
        data1: undefined,
        ...
      }
    };
  }

  fetchData = ():void => {
    this.setState({ loading: true });
    Axios.get<SoftSessionData>(URL_FETCH)
      .then(res => {
        if (res.status === 200 && res != null) {
          this.setState({ anyTestData:{... res.data} });
          console.log(res.data);
          this.setState({ loading: false });
        } else {
          console.log('problem when fetching the logs from backend');
        }
      })
      .catch(error => {
        console.log(error);
      });
  }

  render():JSX.Element {
    return(
      <div>
        <div>
          <button onClick={this.fetchData}>Search</button>
        </div>

        {this.state.loading == true ? <p>Waiting</p>:
          <div>
            <AnyComponent currentData={this.state.anyTestData}></AnyComponent>
          </div>
        }
      </div>
    );
  }
}

My jasmine.json file:

{
  "spec_dir": "spec",
  "spec_files": [
    "**/*[sS]pec.tsx"
  ],
  "helpers": [
    "helpers/reporter.js",
    "helpers/babel.js",
    "helpers/**/*.{js,ts}"
  ],
  "env": {
    "stopSpecOnExpectationFailure": false,
    "random": true
  }
}

The file where I implement my test :

import "jasmine";
import { render, fireEvent, screen, waitForElementToBeRemoved } from '@testing-library/react';
import * as React from "react";
import Home from '../src/components/home/Home';

import * as http from 'http';
import App from './mock-express/mocks.app'

const port = 9000;

App.set('port', port);


const server = http.createServer(App);
server.listen(port);
server.on('listening', onListening);

function onListening(): void {
  console.log(`Listening on port ` + port);
}

describe('At initiation of our App', () => {
    it('should display our Home component', () => {
      render(<Home />);
      screen.debug();
    });

    it('should display log after fetching data', async () => {
        const home = render(<Home />);

        const waitMessage = home.getByText('Waiting', {
          selector: 'p',
        });

        const button = home.getByText('Search', { selector: 'button' });

        fireEvent.click(button);
          
        expect(waitMessage).toBeUndefined;

        await waitForElementToBeRemoved(() => screen.queryByText(/Waiting/))
    });
});

The result of my test in my terminal:

PS C:\Applications\Git\...\web-app> npm run test

> [email protected] test
> cross-env NODE_ENV=test jasmine

Jasmine started
Listening on port 9000
Warning: The current testing environment is not configured to support act(...)
<body>
  <div>
    <div>
      <div>
        <button>
          Search logs
        </button>
      </div>
      <p>
        En attente
      </p>
    </div>
  </div>
</body>
Warning: The current testing environment is not configured to support act(...)

  At initiation of our App
    √ should display our Home component
Warning: The current testing environment is not configured to support act(...)
Warning: The current testing environment is not configured to support act(...)

     //Some instruction from mock server//

Warning: The current testing environment is not configured to support act(...)
    √ should display log before fetching data

Executed 2 of 2 specs SUCCESS in 0.225 sec.
Randomized with seed 09963.
PS C:\Applications\Git\...\web-app>

This warning appears multiple times but I don't get it.

From this article https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning I think that mean that something happened to my component when I wasn't expecting anything to happen but how to clear it?

Thanks in advance for any help.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'warning from test with jasmine and react testing library

Sources

Related Questions