Dromediansk

  it("shows error notification if error occurs", () => {
    useFetch.mockReturnValue({
      loading: false,
      data: [],
      error: "Some error occured!",
    });
    const { getByTestId } = render(<CountriesContainer />);

    expect(getByTestId("error-message")).toBeInTheDocument();
    expect(getByTestId("error-message")).toHaveTextContent(

Dromediansk

  it("shows countries when data are fetched", () => {
    useFetch.mockReturnValue({
      loading: false,
      data: stubbedCountries,
      error: null,
    });
    const { getByTestId } = render(<CountriesContainer />);

    expect(getByTestId("Slovakia-card")).toBeInTheDocument();
  });

Dromediansk

it("shows loading when data are being fetched", () => {
    useFetch.mockReturnValue({
      loading: true,
      data: [],
      error: null,
    });

    const { getByTestId } = render(<CountriesContainer />);

    expect(getByTestId("loading-spinner")).toBeInTheDocument();

Dromediansk

import React from "react";
import { render, act, fireEvent } from "@testing-library/react";
import CountriesContainer from "./CountriesContainer";
import { useFetch } from "../utils/customHooks";

jest.mock("../utils/customHooks");

const stubbedCountries = [
  {
    numericCode: 1,

Dromediansk

import React, { useRef, useReducer } from "react";
import CountryCard from "../components/CountryCard/CountryCard";
import AdvancedFilter from "../components/AdvancedFilter/AdvancedFilter";
import { useFetch } from "../utils/customHooks";
import { Spinner } from "../utils/Spinner";

import "./CountriesContainer.css";

const CountriesContainer = () => {
  const componentIsMounted = useRef(true);

Dromediansk

describe("AdvancedFilter component", () => {
// ...

it("triggers event handler on input change of name", () => {
    const changedSearchValue = { ...stubbedSearchValue, name: "Slovakia" };
    const { getByTestId, rerender } = render(
      <AdvancedFilter
        searchValue={stubbedSearchValue}
        handleChangeValue={mockChangeValue}
      />

Dromediansk

import React from "react";
import { render, fireEvent, act } from "@testing-library/react";
import AdvancedFilter from "./AdvancedFilter";

describe("AdvancedFilter component", () => {
  const mockChangeValue = jest.fn();
  const stubbedSearchValue = {
    name: "",
    capital: "",
    population: "",

Dromediansk

import React from "react";
import "./CountryCard.css";

const CountryCard = ({ country }) => (
  <div className="country-card" data-testid={`${country.name}-card`}>
    <h3>{country.name}</h3>
    <hr />
    <ul className="country-info-list">
      <li className="country-info-item">
        <h4>Capital:</h4>

Dromediansk

import React from "react";
import CountryCard from "./CountryCard";

import { render } from "@testing-library/react";

const stubbedCountry = {
  name: "Slovakia",
  population: 5000000,
  capital: "Bratislava",
  region: "Europe",

Dromediansk

{
  "name": "your-project-name",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.0"
  },
  "devDependencies": {