跳到主要內容

React Hook - useState

Introduction

從我研究React到現在,我認為React是基於state去決定UI該怎麼呈現。在2018年React提出了Hook,賦予了Function Component擁有了React State的概念。我以大家最常使用的Counter範例,來分享用法。一個Counter UI,它透過div顯示次數,透過點擊button去增加次數;在使用React Component的寫法時,程式碼如下,你必須透過this.state宣告member,而透過setState告知React狀態的改變:

import React, { Component } from "react"
 
class CounterComp extends Component {
    constructor(prop){
        super(prop);
        this.state = { count: 0 };
    }
 
    render(){
        const { count } = this.state;
        return (
            <>
                <div aria-label="counter-val">This is a example: {count}.</div>
                <button onClick={() => { this.setState({ count: count + 1 }); }}>count+1</button>
            </>    
        );
    }
}
 
export default CounterComp

只要你做了setState後,相關的元件就會做出對應的改變。接下來的文章將分享如何改成useState的形式與對應測試該怎麼寫。

useState

首先看看程式碼量的差異:

import React, { useState } from "react"
 
function CounterFunc() {
    const [ count, setCount ] = useState(0);
 
    return (
        <>
            <div aria-label="counter-val">This is a example: {count}.</div>
            <button onClick={()=>setCount(count+1)}>count+1</button>
        </>
    )
}
 
export default CounterFunc

首先透過useState賦予count預設值,內容也可以是json;而setCount是用來修改count的狀態。接著在button中綁定一個函式,呼叫setCount並把新的值設定進去即可。是不是很簡單?

Unit Test

一開始我使用了enzyme去測試改完的程式碼:

it('Test click button of counterFunc', ()=>{
    const counterFunc = shallow(<CounterFunc/>);
    counterFunc.find('button').simulate('click');
    expect(counterFunc.find('div').text()).toBe('This is a example: 1.');
});

但我發現click並無法觸發狀態的改變。爬一下文,發現這目前是enzyme的問題link,也許以後某天會改。因此我改用react-testing-library做測試:

import CounterFunc from "../CounterFunc";
import {render, fireEvent, cleanup} from 'react-testing-library';
import React from 'react';
import renderer from 'react-test-renderer';
import {shallow} from 'enzyme';
 
 
describe('<CounterFunc>',()=>{
    afterEach(cleanup);
 
    it('CounterFunc snapshot', () => {
        const tree = renderer.create(<CounterFunc/>).toJSON()
        expect(tree).toMatchSnapshot();
    })
 
    // //Can't work with React-Hook
    // it('Test click button of counterFunc', ()=>{
    //     const counterFunc = shallow(<CounterFunc/>);
    //     counterFunc.find('button').simulate('click');
    //     expect(counterFunc.find('div').text()).toBe('This is a example: 1.');
    // });
 
    it('Test click button of counterFunc', ()=>{
        const utils = render(<CounterFunc/>);
        const display = utils.getByLabelText('counter-val');
        const button = utils.getByText('count+1');
 
        fireEvent.click(button);
        expect(display.textContent).toBe('This is a example: 1.');
    });
});

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