Testing React components with Enzyme and Jest

npx create-react-app --template typescript .

npm i --save-dev enzyme @types/enzyme enzyme-adapter-react-16 @types/enzyme-adapter-react-16

echo "import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });" >> src/setupTests.ts

import React from 'react';

export interface SimpleButtonProps {
    name: string;
}

export function SimpleButton(props: SimpleButtonProps) {
    return (
        <>
            {props.name}
        
    );
}

import React from 'react';
import { SimpleButton } from './SimpleButton';
import { shallow } from 'enzyme';

test('Test if button contain name from props', () => {
    const enzymeRenderedComponent = shallow();
    const button = enzymeRenderedComponent.find('button');
    expect(button.contains('test-name')).toBeTruthy();
});

import React from 'react';

export interface SimpleButtonProps {
    countryName: string;
}

export function SimpleButton(props: SimpleButtonProps) {
    return (
        <>
            {props.countryName}! Welcome, first time huh?
        
    );
}

import React from 'react';
import { SimpleButton } from './SimpleButton';

export interface SimpleButtonProps {
    countryName: string;
}

export function ComplexButton(props: SimpleButtonProps) {
    return (
        <>
            
Another COVID lockdown is happening in: {props.countryName}
            
        
    );
}

import React from 'react';
import { ComplexButton } from './ComplexButton';
import { mount, shallow } from 'enzyme';
import { SimpleButton } from './SimpleButton';

test('Dummy test to display different components', () => {
    const enzymeFullRenderedComponent = mount();
    const enzymeShallowRenderedComponent = shallow();

    console.log(enzymeFullRenderedComponent.debug());
    console.log(enzymeShallowRenderedComponent.debug());
});

test('Test if Complex button has proper texts', () => {
    const enzymeFullRenderedComponent = mount();

    enzymeFullRenderedComponent.contains('Another COVID lockdown is happening in: Poland');
    enzymeFullRenderedComponent.contains('Poland ! Welcome, first time huh?');
});

test('Test if ComplexButton has SimpleButton inside', () => {
    const enzymeFullRenderedComponent = mount();
    expect(enzymeFullRenderedComponent.containsMatchingElement()).toBeTruthy();
});

 PASS  src/components/buttons/ComplexButton.test.tsx
  ✓ Dummy test to display different components (48ms)
  ✓ Test if Complex button has proper texts (3ms)
  ✓ Test if ComplexButton has SimpleButton inside (3ms)

  console.log src/components/buttons/ComplexButton.test.tsx:10
    
      

        Another COVID lockdown is happening in:
        Poland
      
      
        
          Poland
          ! Welcome, first time huh?
        
      
    

  console.log src/components/buttons/ComplexButton.test.tsx:11
    
      

        Another COVID lockdown is happening in:
        Poland
      
      
    

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        2.772s

export const flushPromises = async (): Promise => {
    return new Promise(
        (resolve: () => void): NodeJS.Immediate => setImmediate(resolve),
    );
};

export async function fetchPatients(): Promise {
    const patients = await fetch('https://duckduckgo.com/?q=covid+patients&atb=v170-1&ia=web');
    const patientsJson = await patients.json();

    if (!Array.isArray(patientsJson) || Array.isArray(patientsJson) && patientsJson.some((element) => typeof element !== 'string')) {
        throw Error('Api responded with wrong data.');
    }
    return patientsJson;
}

import React, { useState } from 'react';
import { CovidList } from './CovidList';
import { fetchPatients } from '../../api/patients-api';

export function CovidDownloader() {
    const [patients, setPatients] = useState([]);
    const handleFetchPatients = async () => {
        const patients = await fetchPatients();
        setPatients(patients);
    }
    return (
        <>
            Fetch data
            
        
    );
}

import React from 'react';
import { shallow, mount } from 'enzyme';
import { CovidDownloader } from './CovidDownloader';
import { CovidList } from './CovidList';
import fetchMock from 'fetch-mock';
import { flushPromises } from '../../test-utils';
import { act } from 'react-dom/test-utils';

test('Test is CovidDownloader displays empty patients list at the beginning', () => {
    const component = shallow()
    component.containsMatchingElement();
});

describe('Testing e2e CovidDownloader actions', (): void => {
    afterEach((): void => {
        fetchMock.restore();
    });
    test('Test if user can download patients', async () => {
        await act(async (): Promise => {
            fetchMock.getOnce('https://duckduckgo.com/?q=covid+patients&atb=v170-1&ia=web',
                ['Artur Dziedziczak', 'Donald Trump', 'Ozzy Ozbrun']
            );
            const component = shallow()
            component.find('button').simulate('click');
            await flushPromises();

            component.containsMatchingElement();
        });
    })

    test('Test if patients are displayed in component', async () => {
        await act(async (): Promise => {
            fetchMock.getOnce('https://duckduckgo.com/?q=covid+patients&atb=v170-1&ia=web',
                ['Artur Dziedziczak', 'Donald Trump', 'Ozzy Ozbrun']
            );
            const component = mount()
            component.find('button').simulate('click');
            await flushPromises();
            component.update();

            const covidListComponent = component.find('CovidList');
            expect(covidListComponent.contains('Artur Dziedziczak')).toBeTruthy();
            expect(covidListComponent.contains('Donald Trump')).toBeTruthy();
        });
    })
});