warning from test with jasmine and react testing library

Viewed 348

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

> web-app@1.0.0 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.

0 Answers
Related