跳到主要內容

React Hook - useContext & Test Context

Introduction

我在Study React所撰寫的第一個範例是系統的登入與登出,而登入狀態需要由上層元件傳遞給登入與登出元件做修改。在這範例中,由於上層元件與登入元件只有一層,所以我可以透過建構元將狀態傳遞過去;然而登出元件與上層元件相差太多層,傳遞並不是那麼容易。

在React Hook推出之前,有flux、Redux,或者是後來推出的Context,都可以解決這個問題;而本篇要介紹的useContext,我認為比前面幾個都還容易達到需求。

以一個登入畫面為例,我們在App元件中,希望能透過authState來決定該顯示登入畫面又或者是登入後的畫面;假如使用者尚未登入,那我們會將會Route至登入畫面,即LoginForm元件。在LoginForm中,如果使用者成功登入後,會去修改這個authState;而React會因為這個狀態的改變,重新render App元件並Route至登入後的畫面。我將在App中createContext,而LoginForm將會useContext去做狀態的修改。

createContext

首先透過React.createContext建立共用的Context變數AuthContext。在App元件中,透過useState宣告了成員變數authState,並使用AuthContext.Provider將變數分享給下層元件。從程式碼可以得知,如果authState為true就會render DefaultLayout元件;反之則是LoginForm元件。

export const AuthContext = React.createContext(null);
 
function App(){
  const [ authState, setAuthState ] = useState(false);
 
  let route_target;
  if( !authState) {
    route_target = <Route path="/" name="Login" component={LoginForm}/>;
  } else
    route_target = <Route path="/" name="Home" component={DefaultLayout} />;
 
  return (
    <AuthContext.Provider value={[authState, setAuthState]}>
      <HashRouter>
        <Switch>
        {route_target}
        </Switch>
      </HashRouter>
    </AuthContext.Provider>
  );
}

useContext

在我的LoginForm元件中,可以透過useContext去拿到authState與setAuthState。當使用者輸入帳號密碼並點擊Login Button後,會觸發handleSubmit,接著它會透過Auth.signIn去執行登入動作。在這裡會根據登入成功與否,去透過setAuthState更新authState。

function LoginForm(){
  const [ authState, setAuthState ] = useContext(AuthContext);
  const [ username, setUserName ] = useState("");
  const [ password, setPassword ] = useState("");
  const [ feedback, setFeedBack ] = useState(null);
 
  const validateForm = ()=>{
    return username.length > 0 && password.length > 0;
  }
 
  const handleSubmit = (e)=>{
    e.preventDefault();
    try {
      Auth.signIn(username, password);
      setAuthState(true);
    } catch( err ) {
      setFeedBack(err.message);
    }
  }
 
  const showFeedback = ()=>{
    return feedback != null;
  }
 
  return (
 
    <div className="Login">
      <form onSubmit={handleSubmit}>
        <FormGroup>
          <Label>Username</Label>
          <Input
            autoFocus
            aria-label="username-input"
            type="text"
            value={username}
            onChange={e=>setUserName(e.target.value)}
          ></Input>
        </FormGroup>
        <FormGroup>
          <Label>Password</Label>
          <Input
            value={password}
            aria-label="password-input"
            onChange={e=>setPassword(e.target.value)}
            type="password"
          ></Input>
        </FormGroup>
        <Button
          block
          disabled={!validateForm()}
          type="submit"
          onClick={()=>{}}
        >
          Login
        </Button>
        <br/>
        <Alert color="danger" isOpen={showFeedback()} fade={true} aria-label="feedback">{feedback}</Alert>
      </form>
 
    </div>
  );
}

Unit Test

在單元測試部分,為了要傳遞共享的Context資料給LoginForm,於是我做了一個中繼的LoginFormComp,使用方式類似App的做法。除此之外,我使用了React Hook的useEffect;當LoginForm修改了登入狀態,它就會觸發useEffect裡面的動作,在這我用來標記登入成功與否。可以直接參考測試“Login success”,在輸入帳號密碼與點擊Login Button後,就可以驗證authState是否為true。假如要模擬登入失敗的情況,可以使用mockImplementation讓它拋出例外。

import {render, fireEvent, cleanup} from 'react-testing-library';
import React, { useState, useEffect } from 'react';
import LoginForm from '../LoginForm/LoginForm';
import { AuthContext } from "../../../App";
import Auth from "../Components/Auth/Auth"
 
let authState = false;
function LoginFormComp(){
    const [ state, setState ] = useState(false);
    useEffect(()=>{
        authState = state;
    });
    return <AuthContext.Provider value={[state, setState]}><LoginForm/></AuthContext.Provider>;
}
 
 
describe('<LoginForm/>',()=>{
    afterEach(cleanup);
 
    const inputLoginInfo = (utils, username, password)=>{
        const username_input = utils.getByLabelText('username-input');
        const password_input = utils.getByLabelText('password-input');
 
        fireEvent.change(username_input, {
            target: { value: username }
        });
        fireEvent.change(password_input, {
            target: { value: password }
        });
    };
 
    const clickLoginBtn = (utils)=>{
        const loginButton = utils.getByText('Login');
        fireEvent.click(loginButton);
    };
 
    const givenAuthSignInSuccessfully = ()=>{
        const auth_do_nothing = jest.fn();
        auth_do_nothing.mockImplementation(()=>{});
        Auth.signIn = auth_do_nothing.bind(Auth);
    };
 
    it('Login success', ()=>{
        // given
        givenAuthSignInSuccessfully();
        const formComp = render(<LoginFormComp/>);
 
         // when
         inputLoginInfo(formComp, 'ADMIN', 'ADMIN');
         clickLoginBtn(formComp);
 
        // then
        expect(authState).toBeTruthy();
    });
});

其它

本篇文章中,我的Context僅儲存一個boolean變數;假如你的資料較為複雜,是可以透過json去建置資料。除此之外,針對資料部分,也可以獨立做成Model元件。後續有機會會再分享關於較複雜資料與jest的使用細節。

Reference

留言

這個網誌中的熱門文章

PostgreSQL - Unattended installation on windows

Introduction 要將別人軟體包裝到自己軟體中,不可或缺的東西就是Unattended installation。以Unattended installation來說,我們可以選擇透過Installer的silent mode安裝,也可以透過把目標軟體做成portable的版本。本篇文章分享這兩種方法,教導大家如何將PostgreSQL透過Unattended installation方式安裝到目標系統成為service。 Note. 本篇以PostgreSQL 10.7為例。 Install with installer Tips 安裝程式或反安裝程式的參數,除了可以直接上官網搜尋Installation User Guide以外,也可以直接使用help參數查詢: postgresql- 10.7 - 2 -windows-x64.exe --help Windows安裝程式主要有EnterpriseDB與BigSQL兩種。BigSQL版本安裝元件是透過網路下載且支援參數不如EnterpriseDB版本多,以我們需求來說,我們傾向於使用EnterpriseDB版本。接下來分享給大家安裝與反安裝方法。 Installation @ echo off set INSTALL_DIR =C:\postgres10 set INSTALLER =postgresql- 10.7 - 2 -windows-x64.exe   rem options for installation set SSMDB_SERVICE =postgresql- 10 set MODE =--unattendedmodeui none --mode unattended   set DB_PASSWD =--superpassword postgres set DB_PORT =--serverport 5432   set SERVICE_NAME =--servicename % SSMDB_SERVICE %   set PREFIX =--prefix "%INSTALL_DIR%" set DATA_DIR =--datadir "%INSTALL_DIR%\data"   set OPTIONS =

How to install RIDE on Windows?

Introduction 多年沒在Windows上開發RobotFramework,趁著這次整理一下RIDE安裝方法。 目前RIDE最新版本與Python對應版本如下: (3.6 < python <= 3.11) Install current released version (2.0.8.1) with: pip install -U robotframework-ride 安裝Python 直接到Python官網找尋最新的3.11版本,我使用3.11.9: link 。安裝就是一直下一步而已。 安裝wxPython 每次安裝RIDE最困難的都是wxPython。看了一下 官網 描述,我就姑且相信一下: 接著進入下 載頁面 就有安裝教學。基本上就是到Python目錄下的Scripts直接執行以下command: pip install -U wxPython 安裝RIDE 接著就如RIDE官網所說,執行以下command: pip install -U robotframework-ride 啟動RIDE 直接在相同目錄下執行ride就可以啟動了,你也可以直接在桌面建ride連結,加快下次啟動時間。 沒想到這次這麼順利就安裝完成了。因為我是使用java去啟動robot framework,就不特別講要怎麼使用pip安裝robot framework了。

Hello World!

即將要搬家,因此舊網頁內容將慢慢轉移至Blogger。 如果要存取舊網頁,可以使用以下連結: https://wiki.tonylin.idv.tw/dokuwiki/doku.php