2

我是 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默认情况下测试 Loading 状态，并且我想编写第二个测试来测试传入 props 的 Children 是否在authStatusAuthed 时呈现。我找到了一种模拟实现状态更改的方法，但是该实现仅限于一个useEffect，因为将来可能会有多个useEffects，我不想采用这种方法。有没有更好的方法来测试这种行为？

4

2 回答 2

0

首先，你不能只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会发生

于 2021-01-06T07:03:52.163 回答
0

第一个模拟getAuth，现在你可以有两个单独的测试用例。

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

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

于 2021-01-06T07:04:40.507 回答