Jest cannot read property of "searchForGames" of undefined

Viewed 31

I am trying to create a test, that checks wether a component draws correctly or not. But when i try to run the test i get this error message:

TypeError: Cannot read property 'searchForGames' of undefined

I have tried adding som mock data in searchForGames, but i cant get it to work:(

Here is my code: search.tsx

import * as React from "react";
import { Component } from "react-simplified";
import { CardGroup, GameCard, Container, NavBar, SubHeader, Alert } from "./widgets";
import { igdbService, Game } from "./services";

export class Search extends Component<{
  match: { params: { searchString: string } };
}> {
  games: Game[] = [];

  render() {
    return (
      <Container>
        {this.games.length !== 0 ? (
        <CardGroup>
          {this.games.map((game) => {
            return (
              <div key={game.id} className="col">
                <NavBar.Link to={"/games/" + game.id}>
                  <GameCard
                    name={game.name}
                    url={game.cover ? game.cover.url.replace("thumb", "cover_big") : ""}
                  />
                </NavBar.Link>
              </div>
            );
          })}
        </CardGroup>
        ) : (
          <div className="d-flex flex-column justify-content-center">
            <h4 className="mx-auto">The game you are looking for could not be found in the IGDB database..</h4>
            <img className="w-40 mx-auto" alt="Sadge" src="https://c.tenor.com/kZ0XPsvtqw8AAAAi/cat-farsi-sad.gif"/>
          </div>
        )}
      </Container>
    );
  }

  mounted() {
    this.getGames();
  }

  getGames() {
    igdbService
      .searchForGames(this.props.match.params.searchString)
      .then((response) => (this.games = response))
  }
}

search.test.tsx

import {Search} from "../src/Search"
import * as React from "react";
import { shallow } from 'enzyme';
import { NavBar, GameCard } from "../src/widgets";

jest.mock("../src/services", () => {
    class Service {
        searchForGames(string: searchString) {
            return Promise.resolve(
                [
                    {
                        id:143755,
                        cover: {
                            id:1311803,
                            url: '//images.igdb.com/igdb/image/upload/t_thumb/co2tp7.jpg'
                        },
                        name: "Terrorist Killer",
                    }
                ]
            )

        }
        getGames() {
            return Promise.resolve();
        }
    }
    return new Service();
})

test("Search draws correctly", (done) => {
    const wrapper = shallow (<Search match={{params: {searchString: "Terrorist"} }}/>)

    setTimeout(() => {
        expect(
            wrapper.containsAllMatchingElements([
                <div>
                    <NavBar.Link to="/games/143755">
                        <GameCard
                            name="Terrorist Killer"
                            url="//images.igdb.com/igdb/image/upload/t_thumb/co2tp7.jpg"
                        />
                    </NavBar.Link>
                </div>
            ])
        ).toEqual(true);
        done();
    })
})
0 Answers
Related