Testing/mocking a service inside functional container in React/Jest - reactjs

Question

I am stuck in a weird scenario. I wrote a functional component a few days back. It had state hooks in it and also context hooks. I am calling an API in a function based on a click. Here's the function
const gameService = new Game();
const Toolbar = () => {
const [name, setName] = useState("");
const [addVisible, setAddVisible] = useState(false);
const [loading, setLoading] = useState(false);
const errorContext = useContext(ErrorContext);
const appContext = useContext(AppContext);
const addGame = async () => {
setLoading(true);
try {
const updatedGames = await gameService.add({
name
});
appContext.setGames(updatedGames);
setLoading(false);
setName('');
setAddVisible(false);
errorContext.setError(undefined);
} catch (e) {
errorContext.setError(e);
setLoading(false);
}
};
return (
<StyledToolbar>
Games
<IconButton
style={{ float: "right" }}
onClick={() => setAddVisible(true)}
>
<Plus size={12} />
</IconButton>
<br />
{addVisible && (
<div className="form">
<form onSubmit={() => addGame()}>
<label htmlFor="name">Board Name</label>
<input
disabled={loading}
id="name"
name="name"
placeholder="My Board 1"
value={name}
onChange={e => setName(e.target.value)}
/>
<div style={{ float: "right" }}>
<IconButton type="submit" disabled={loading}>
<ArrowRight size={15} />
</IconButton>
<IconButton
disabled={loading}
onClick={() => {
setAddVisible(false);
setName("");
}}
>
<X size={15} />
</IconButton>
</div>
</form>
</div>
)}
</StyledToolbar>
);
};
This is game Service which is handling the API calls
class Game {
constructor() {
this.instance = axios.create({
baseURL: API_URL,
timeout: TIMEOUT
});
}
getAll() {
return new Promise(async (resolve, reject) => {
try {
const game = await this.instance.get('/games');
resolve(game.data);
} catch (e) {
reject(e.message);
}
});
}
getById(id) {
return new Promise(async (resolve, reject) => {
try {
const game = await this.instance.get(`/games/${id}`);
resolve(game.data);
} catch (e) {
reject(e.message);
}
});
}
update(id, body) {
return new Promise(async (resolve, reject) => {
try {
const game = await this.instance.put(`/games/${id}`, body);
resolve(game.data);
} catch (e) {
reject(e.message);
}
});
}
add(body) {
return new Promise(async (resolve, reject) => {
try {
const game = await this.instance.post('/games', body);
resolve(game.data);
} catch (e) {
reject(e.message);
}
});
}
delete(id) {
return new Promise(async (resolve, reject) => {
try {
const game = await this.instance.delete(`/games/${id}`);
resolve(game.data);
} catch (e) {
reject(e.message);
}
});
}
}
and this is so far test I've written and I am not able to figure out how I can test "Add" method of this class. I am trying to simulate the click and trying to mock/spy on add method.
describe("Toolbar Add functionality", () => {
let wrapper;
beforeEach(() => {
wrapper = mount(<Toolbar />);
wrapper.find("IconButton").simulate("click");
});
it("Should make an API call when clicked add button", () => {
jest.mock("../services/game");
const gameService = new Game();
console.log(gameService);
const getSpy = jest.spyOn(gameService, "add");
const inputField = wrapper.find("form").find("input");
inputField.simulate("change", { target: { value: "name" } });
wrapper
.find("form")
.find("IconButton[type='submit']")
.simulate("click");
expect(getSpy).toBeCalled();
});
});
I need help in finding out how I can mock service in a similar scenario because I have the same issue in multiple containers where I am fetching data and updating the calls.

Answer 1

You need to wait for the promise to resolve setting your test as async and using await / act, this is the method I use but you can find other options by googling jest asynchronous testing
import { act } from 'react-dom/test-utils';
...
describe("Toolbar Add functionality", async () => {
let wrapper;
let gameService;
beforeEach(() => {
// I'm not sure about this arragement for gameService creation though
jest.mock("../services/game");
const gameService = new Game();
wrapper = mount(<Toolbar gameService={gameService} />);
wrapper.find("IconButton").simulate("click");
});
it("Should make an API call when clicked add button", () => {
console.log(gameService);
const getSpy = jest.spyOn(gameService, "add");
const inputField = wrapper.find("form").find("input");
inputField.simulate("change", { target: { value: "name" } });
wrapper
.find("form")
.find("IconButton[type='submit']")
.simulate("click");
await act(async () => await Promise.resolve());
expect(getSpy).toBeCalled();
});
});
UPDATE
Because your Game service is a class and you are creating new objects to use it, it will be necessary to pass it as a prop so you will be able to spy on the actual object the component is using
const gameService = new Game();
const Toolbar = ({gameService}) => {
const [name, setName] = useState("");
...
}