开玩笑：测试 React state 的 useEffect 变化

Question

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

下面是我的代码：

//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为默认值时测试 Loading state，并且我想编写第二个测试来测试在authStatus被验证时是否渲染了传入 props 的子项。 我找到了一种模拟实现 state 更改的方法，但是该实现仅限于一个useEffect ，因为将来可能会有多个useEffects ，我不想用这种方法 go 。 有没有更好的方法来测试这种行为？

Answer 1

首先，你不能只在useEffect回调中使用await关键字，它应该是一个async function ，它会这样做：

//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 function。

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

Answer 2

首先模拟getAuth ，现在您可以有两个单独的测试用例。

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

第二个测试用例->您模拟的 getAuth function 应该返回一些未定义的值。这将涵盖您的else{ setAuthStatus('Unauthed') }部分