jeudi 28 janvier 2021

Test failed of a Component in react using typescript

When ever I run the test it fails. I don't know what mistake I am making.

How can I test those if statements and the child component. I am using jest and enzyme for react tests.

This is my test file:

import React from "react";
import { shallow } from "enzyme";
import LaunchContainer from "./index";
import Launch from "./Launch";

describe("render LaunchContainer component", () => {

    let container: any;
    beforeEach(() => { container = shallow(<LaunchContainer setid={()=>{}} setsuccess={()=>{}} />) });

    it("should render LaunchContainer component", () => {
        expect(container.containsMatchingElement(<Launch setsuccess={()=>{}} setid={()=>{}} data=/>)).toEqual(true);
      });

})

The parent component for which the test is used:

import React from "react";
import { useLaunchesQuery } from "../../generated/graphql";
import Launch from './Launch';

interface Props {
    setid: any;
    setsuccess: any;
}

const LaunchContainer: React.FC<Props> = ({setid, setsuccess}) => {
    const {data, loading, error} = useLaunchesQuery();

    if (loading) {
        return <div>loading...</div>
    }

    if (error || !data) {
        return <div>error</div>
    }

    return <Launch setid={setid} data={data} setsuccess={setsuccess} />
}

export default LaunchContainer;

The child component to be added in test:

import React from "react";
import { LaunchesQuery } from "../../generated/graphql";
import './style.css';

interface Props {
    data: LaunchesQuery;
    setid: any;
    setsuccess: any;
}

const Launch: React.FC<Props> = ({setid, data, setsuccess}) => {
    return (
        <div className="launches">
            <h3>All Space X Launches</h3>
            <ol className="LaunchesOL">
                {!!data.launches && data.launches.map((launch, i) => !!launch && 
                    <li key={i} className="LaunchesItem" onClick={() => {
                        setid(launch.flight_number?.toString())
                        setsuccess(JSON.stringify(launch.launch_success))
                    }}>
                        {launch.mission_name} - {launch.launch_year} (<span className={launch.launch_success? "LaunchDetailsSuccess": launch.launch_success===null? "": "LaunchDetailsFailed"}>{JSON.stringify(launch.launch_success)}</span>)
                    </li>
                )}
            </ol>
        </div>
    );
}

export default Launch;

Aucun commentaire:

Enregistrer un commentaire