我仍在将我的酶测试转移到 react-testing-library 的过程中,并且我有一个相当常见的场景,当组件安装时,它会启动 Ajax 请求以获取一些数据。就在 fetch 开始之前,它设置了一些状态值来指示它正在加载,这反过来又呈现了一个微调器。完成后,状态将同时更新数据,并且“loadingState”在适当的情况下设置为“Completed”或“Failed”。
import React, { useEffect, useState } from "react";
import { SwapSpinner } from "react-spinners-kit";
import styled from "styled-components";
import * as R from "ramda";
import { getPeople } from "./getPeople";
const FlexCenter = styled.div`
height: 250px;
display: flex;
justify-content: center;
align-items: center;
`;
const loadingStates = {
notStarted: "notStarted",
isLoading: "isLoading",
success: "success",
failure: "failure"
};
function App() {
const [people, setPeople] = useState([]);
const [isLoading, setLoading] = useState(loadingStates.notStarted);
useEffect(() => {
setLoading(loadingStates.isLoading);
getPeople()
.then(({ results }) => {
setPeople(results);
setLoading(loadingStates.success);
})
.catch(error => {
setLoading(loadingStates.failure);
});
}, []);
return (
<div>
{R.cond([
[
R.equals(loadingStates.isLoading),
() => (
<FlexCenter data-testid="spinner">
<SwapSpinner />
</FlexCenter>
)
],
[
R.equals(loadingStates.success),
() => (
<ul data-testid="people-list">
{people.map(({ name }) => (
<li key={name}>{name}</li>
))}
</ul>
)
],
[R.equals(loadingStates.failure), <div>An error occured</div>]
])(isLoading)}
</div>
);
}
export default App;
使用 Enzyme,我可以手动将状态设置为任何一个loadingStates
键,并断言渲染条件会渲染适当的更改。
有没有办法可以在 RTL 中做到这一点?