What is the best way to test .tsx file ?

[MuhannedAlogaidi]

What i am trying to do is to test or make test to .tsx code by using Mocha as i found by search . the .tsx file contains Reacjs.net code . Now my question is how can i access the component in side .tsx files and call them .

Thank you

tsx file import * as React from 'react'; import 'isomorphic-fetch';

interface IEmployee { firstname: string; lastname: string; id: number; fullname: string; enrollmentdate: Date; } class SEmployee { public firstname: string; public lastname: string; public id: number; public fullname: string; public enrollmentdate: Date; } interface IFetchEmployee { employees: IEmployee[]; loading: boolean; enableaction: boolean; }

export class FetchEmployee extends React.Component<{}, IFetchEmployee> { public constructor() { super(); this.state = { employees: [], loading: false, enableaction: true }; }

public render() {
    let contents = this.state.loading
        ? <p><em>Loading...</em></p>
        : FetchEmployee.displayTabularData(this.state.employees);

    return <div>
               <h1>Employees Page</h1><p>This component demonstrates CRUD operations </p>
               {FetchEmployee.emptyForm()}
               <fieldset className="defSetfieldset"><legend>Controls:</legend>
                   <button type="Submitt" id="Sf" onClick={() => { this.readdata() }}>Read Employee</button> |
                   <button type="Submitt" id="Sf" disabled={this.state.enableaction} onClick={() => { this.savebyinput() }}>Save Employee</button> |
                   <button type="Submitt" id="df" disabled={this.state.enableaction} onClick={() => { this.delete((document.getElementById("id") as HTMLInputElement).value) }}>Delete Employee</button> |
                   <button type="Submitt" id="df" disabled={this.state.enableaction} onClick={() => { this.update((document.getElementById("id") as HTMLInputElement).value) }}>Update Employee</button>
               </fieldset>
               {contents}
           </div>;
}
private static displayTabularData(employees: SEmployee[]) {
    return <table className='table'>
               <thead>
               <tr>
                   <th>Id</th>
                   <th>First Name</th>
                   <th>Last Name</th>
                   <th>Full Name</th>
                   <th>Enrollment Date</th>
               </tr>
               </thead>
               <tbody>
               {employees.map(employee =>
                   <tr key={employee.id}>
                    <td>{employee.id}</td>
                    <td>{employee.firstname}</td>
                    <td>{employee.lastname}</td>
                    <td>{employee.fullname} </td>
                    <td>{employee.enrollmentdate} </td>
                </tr>
               )}
               </tbody>
           </table>; 
}
private static emptyForm() {
    return <fieldset className="defSetfieldset"><legend>Employee form:</legend>
               <form className="commentForm">
                   <table className='table'>
                       <tbody>
                       <tr >
                           <td>Id</td>
                           <td><input id="id" type="text" placeholder="id" /> </td>
                       </tr>
                       <tr >
                           <td>First Name</td>
                           <td> <input id="fn" type="text" placeholder="first name" /></td>
                       </tr>
                       <tr>
                           <td>Last Name</td>
                           <td> <input id="ln" type="text" placeholder="last name" /></td>
                       </tr>
                       </tbody>
                   </table>
               </form></fieldset>;
}

private getForm(): SEmployee {
    let id: number = 0;
    id = parseInt((document.getElementById("id") as HTMLInputElement).value);
    let fn = (document.getElementById("fn") as HTMLInputElement).value;
    let ln = (document.getElementById("ln") as HTMLInputElement).value;
    let dt: Date = new Date(2017, 1, 1);

    let emp = new SEmployee();
    emp.id = id;
    emp.firstname = fn;
    emp.lastname = ln;
    emp.enrollmentdate = dt;

    return emp;
}
public readdata() : SEmployee[] {
    fetch('/api/SampleData/GetEmployees').then(response => response.json() as Promise<IEmployee[]>).then(data => {
        this.setState({ employees: data, loading: false, enableaction: false });
    });

    return this.state.employees;
};
public savebyinput() {
    var datas = {};
    datas = this.getForm();
    var sendto = JSON.stringify(datas);
    fetch('/api/SampleData/AddEmployee?emp=' + sendto,
            {
                method: "POST",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json; charset=utf-8'
                }
            })
        .then(response => response.json() as Promise<IEmployee[]>)
        .then(data => {
            this.setState({ employees: data, loading: false, enableaction: false });
        });
};
public delete(Id) {
    var datas = {};
    datas = this.getForm();
    var sendto = JSON.stringify(datas);
    fetch('/api/SampleData/DeleteEmployee?emp=' + sendto,
            {
                method: "POST",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json; charset=utf-8'
                }
            })
        .then(response => response.json() as Promise<IEmployee[]>)
        .then(data => {
            this.setState({ employees: data, loading: false, enableaction: false });
        });
};
public update(Id) {
    var datas = {};
    datas = this.getForm();
    var sendto = JSON.stringify(datas);
    fetch('/api/SampleData/UpdateEmployee?emp=' + sendto,
            {
                method: "POST",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json; charset=utf-8'
                }
            })
        .then(response => response.json() as Promise<IEmployee[]>)
        .then(data => {
            this.setState({ employees: data, loading: false, enableaction: false });
        });
};

}

test file

var Assert = require('assert'); describe('Array', function() { describe('#indexOf()', function() { it('should return -1 when the value is not present', function() { Assert.equal(-1, [1,2,3].indexOf(4)); }); }); });

var AssertB = require('assert'); describe('ReadList', function () { describe('#readdata', function () { it('should return list of employees', function () { var employee = readdata(); AssertB.equal(employee[0].firstname, "Muhanned"); }); }); });