今天紀錄 Debug 會用方法：logRole

logRole

我們撰寫測試中，時常會出現 FAIL 的情況。
我們可以搭配使用 logRole 去檢查，像是：

export default function Applications(){
    const [email, setEmail] = useState("test@gmail.com");
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    useEffect(() => {
        setTimeout(() => setIsLoggedIn(true), 1500);
    }, [])

    return(
        <>
            <h1>Application</h1>
            <h2>User Info</h2>
            <p>Note: Required Fields</p>
            <section data-testid="sectionId">Some Content</section>
            <a href="https://ithelp.ithome.com.tw/2023ironman/event" title="前往 2023 IT 鐵人賽首頁">2023 IT 鐵人賽</a>
            <img src="https://ithelp.ithome.com.tw/static/2023ironman/img/event/kv_deco_front.png" alt="2023 IT 鐵人賽" />
            <form action="">
                <div>
                    <label htmlFor="email">Email</label>
                    <input 
                        type="email" 
                        name="email" 
                        id="email" 
                        placeholder="Enter Your Email" 
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                    />
                </div>
                <div>
                    <label htmlFor="name">
                        Name<input type="text" name="name" id="name" />
                    </label>
                </div>
                <div>
                    <label htmlFor="level">Name</label>
                    <select name="" id="level">
                        <option value="High">High</option>
                        <option value="Medium">Medium</option>
                        <option value="Low">Low</option>
                    </select>
                </div>
                <button type="submit">Submit</button>
            </form>
            
            {   isLoggedIn
                ? <LogOutBtn setIsLoggedIn={setIsLoggedIn} />
                : <LogInBtn setIsLoggedIn={setIsLoggedIn} />
            }

            {   isLoggedIn
                ? <Hobbies hobbies={["Sleeping", "Cooking", "Eating"]}/>
                : null
            }
        </>
    )
}

加入 logRole :

import { logRoles, render } from "@testing-library/react";
import Applications from "./application";

describe("Application", () => {
    test("Render correctly", () => {
        const view = render(<Applications />);
        logRoles(view.container);
    })
});

測試結果：
logRole 會羅列畫面上依 屬性role 列出對應 DOM nodes，方便我們查看測試的程式碼哪裡出了問題。

  PASS  src/components/application/application.test.tsx
  ● Console
  console.log
  
    heading:
  
    Name "Application":
    <h1 />
  
    Name "User Info":
    <h2 />
    --------------------------------------------------
    link:
  
    Name "2023 IT 鐵人賽":
    <a
      href="https://ithelp.ithome.com.tw/2023ironman/event"
      title="前往 2023 IT 鐵人賽首頁"
    />
    --------------------------------------------------
    img:
  
    Name "2023 IT 鐵人賽":
    <img
      alt="2023 IT 鐵人賽"
      src="https://ithelp.ithome.com.tw/static/2023ironman/img/event/kv_deco_front.png"
    />
    --------------------------------------------------
    textbox:
  
    Name "Email":
    <input
      id="email"
      name="email"
      placeholder="Enter Your Email"
      type="email"
      value="test@gmail.com"
    />
  
    Name "Name":
    <input
      id="name"
      name="name"
      type="text"
    />
    --------------------------------------------------
    combobox:
  
    Name "Name":
    <select
      id="level"
      name=""
    />
    --------------------------------------------------
    option:
  
    Name "High":
    <option
      value="High"
    />
  
    Name "Medium":
    <option
      value="Medium"
    />
  
    Name "Low":
    <option
      value="Low"
  />
  --------------------------------------------------
  button:

  Name "Submit":
  <button
    type="submit"
  />

  Name "Log In":
  <button />
  --------------------------------------------------

參考資源

• React Testing Tutorial - 33 - Debugging