這是本文件的舊版!


React - How to test component with static method?

在撰寫程式時,我會習慣將同性質的utility method放在同一個class中。以實作Login、Logout的功能來說,我就會建立一個class叫Auth,會包含以下methods:

import React, { Component } from 'react';
 
const session_token_key = 'session_token';
 
export default class Auth extends Component {
 
    static signIn(username, password){
        // check credential
        sessionStorage.setItem(session_token_key, 'session_info');
    }
 
    static signOut(){
        sessionStorage.clear();
    }
 
    static checkLogin(){
        if( !sessionStorage.getItem(session_token_key) ) {
            throw new Error("no session info");
        }
    }
};
而Logout的元件中,則會透過Auth.signOut去執行登出的動作:
import React, { useContext } from 'react';
import Auth from './Auth'
import { NavItem, NavLink} from 'reactstrap';
import { AuthContext }  from './AuthContext';
 
 
function Logout(){
    const [ authState, setAuthState ] = useContext(AuthContext);
 
    const signOut = ()=>{
        Auth.signOut();
        setAuthState(false);
        window.location.href = '/';
    };
 
    return (
        <NavItem aria-label="logout-nav-item" className="d-md-down-none" onClick={signOut}>
            <NavLink href="#" ><i className="icon-logout"></i></NavLink>
        </NavItem>
    );
}
 
export default Logout;