Jest：在 useEffect 中测试 React 状态变化

问题描述

我是 Jest 和 Enzyme 的新手，正在努力编写单元测试以检查当存在某个状态值时我的组件是否正确呈现。

下面是我的代码：

//Auth.js
export const Auth = ({ children }) => {
    const [authStatus,setAuthStatus] = useState('waiting')

    useEffect(()=>{
       const status = await getAuth()
       if (status) {
           setAuthStatus('Authed')
       }
       else{
           setAuthStatus('Unauthed')
       }
    },[])

    return (
       <>
          {authStatus === 'waiting' && <p>Loading...</p>}
          {authStatus === 'Authed' && <>{Children}</>
       </>
    )
}

在上面的代码中，我想测试 authStatus 为默认值时的加载状态，我想编写第二个测试来测试当 authStatus 为 Authed 时传递到 props 中的 Children 是否呈现.我找到了一种模拟实现状态更改的方法，但该实现仅限于一个 useEffect，因为将来可能会有多个 useEffects，我不想采用这种方法。有没有更好的方法来测试这种行为？

解决方法

首先，您不能只在 await 回调中使用 useEffect 关键字，它应该是一个 async 函数，可以这样做：

//Auth.js
export const Auth = ({ children }) => {
    const [authStatus,setAuthStatus] = useState('waiting')

    async function checkAuth(){
       const status = await getAuth()
       if (status) {
           setAuthStatus('Authed')
       }
       else{
           setAuthStatus('Unauthed')
       }
    }

    useEffect(()=>{
       checkAuth();
    },[])

    return (
       <>
          {authStatus === 'waiting' && <p>Loading...</p>}
          {authStatus === 'Authed' && <>{Children}</>
       </>
    )
}

然后最好不要测试 state 之类的实现细节。

通常，您想模拟 api calls 并像 modules 函数一样导入 getAuth。

所以我认为你应该模拟 getAuth 函数，然后在你的模拟中返回你想要的值，这样你就可以测试像 loading 这样的不同状态是否会发生

,

首先模拟 postgres=# WITH dt AS (SELECT to_date('31-03-2020','DD-MM-YYYY') mydate) SELECT to_char(dt.mydate,'DD-Mon-YYYY') FROM dt; to_char ------------- 31-Mar-2020 (1 row) ，现在您可以有两个单独的测试用例。

第一个测试用例-> 你模拟的 getAuth 函数应该返回一些定义的值。这将帮助你测试 getAuth。这也将涵盖 {authStatus === 'Authed' && <>{Children}</> 部分。

第二个测试用例 -> 你的模拟 getAuth 函数应该返回一些未定义的值。这将涵盖你的 if (status) { setAuthStatus('Authed') } 部分