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.