Testing Loading state in async operation in Jest - reactjs

Question

I have the following React component, that on componentDidMount() performs an async operation and once data is received, updates the state with the result.
import * as React from "react";
export interface IAppProp {
App: any
}
export interface IAppProp {
App: any
}
export class App extends React.Component<IAppProp, IAppState> {
constructor(props: IAppProp) {
super(props);
this.state = { App: undefined };
}
public componentDidMount(){
// Some async operation
// Once data comes in update state as follows
this.setState({ App: data returned from async operation });
}
public render() {
if (this.state && this.state.App) {
return (
<SomeComponent />
)
} else {
return <span>Loading...</span>
}
}
}
However, while I wait for data to come back, I return a Loading... message in the render() function.
I'm trying to test this Loading state in my Jest test. This is what I have so far:
it("Should display loading when state is undefined", () => {
const inputControl = enzyme.mount(<MyApp App={pass in the right prop} />);
expect(inputControl.find("span").text()).toEqual("Loading...");
});
I know the above is wrong because it never finds the Loading span. I also tried passing undefined in the props but that crashes the test because the async operation in componentDidMount() expects a legit prop.
How can I test this? Thanks!

Answer 1

Here is a working example based on your code (modified since I don't have SomeComponent, the async function wasn't specified, etc.).
Given this component defined in App.tsx:
import * as React from "react";
const getMessageById = (id: number): Promise<string> => {
return Promise.resolve('Message ' + id);
}
interface IAppProp {
messageid: number
}
interface IAppState {
message: string
};
export class App extends React.Component<IAppProp, IAppState> {
constructor(props: IAppProp) {
super(props);
this.state = { message: '' };
}
public componentDidMount(){
// Some async operation
// Once data comes in update state as follows
getMessageById(this.props.messageid).then((message) => {
this.setState({ message });
});
}
public render() {
if (this.state && this.state.message && this.state.message.length > 0) {
return (
<div>The message: {this.state.message}</div>
)
} else {
return <span>Loading...</span>
}
}
}
A test App.test.tsx can be created as follows:
import { mount } from 'enzyme';
import * as React from 'react';
import { App } from './App';
describe('App', () => {
it ('Should display loading until data arrives', async () => {
const inputControl = mount(<App messageid={1} />);
expect(inputControl.html()).toBe('<span>Loading...</span>');
// Let the event loop cycle so the callback queued by 'then'
// in 'componentDidMount()' has a chance to execute
await Promise.resolve();
expect(inputControl.html()).toBe('<div>The message: Message 1</div>');
});
});
For your actual component you will likely need to mock the async function that is getting the data (so you avoid making network requests, etc.), but this should provide a solid start for what you are trying to do and is the best I can do with the information provided.

Answer 2

Sorry for necroing (just a little)
I find that it's hard to test everything from business logic to rendering all in 1 go.
So I split the tests to:
Testing side effects, i.e. prop/state changes, from user interactions and/or async operations
Testing snapshots of exact prop/state combinations that I expect to receive.