英文:
Identifying component and DOM for testing library React
问题
我有一个名为Student的组件
function Student(props) {
const {gradeDetails, addressDetails} = props;
const [marksData, setMarksData] = useState(null);
function fetchMarksData() {
let url = `/api/getMarks/${studentID}`;
axios
.get(url)
.then(output => {
setMarksData(output.data);
});
}
return (
<div>
<label>{addressDetails.cityName}</label>
<label>{marksData.marks}</label>
{/* render other details here */}
</div>
)
}
export default Student;
我创建了一个测试,如下所示
test('Make sure student component renders for City testCity', () => {
render(<Student gradeDetails={grdDetails} addressDetails={addDetails}/>);
const cityExists = screen.findByDisplayValue(/testCity/i);
expect(cityExists).toBeInTheDocument();
我的问题是:
- 如何查看呈现的DOM(HTML)以确保组件成功呈现?
- Student组件还有一个axios API调用 "getMarks()"。我需要模拟该API,以便Student组件能够呈现吗?如何做到这一点?
- 当我调用
expect(cityExists).toBeInTheDocument();
时,我收到错误消息 "Received has value {}",所以我怀疑组件没有成功呈现。在这种情况下,我需要查看HTML。
英文:
I have a component named Student
function Student(props){
const {gradeDetails,addressDetails}=props;
const [marksData,setMarksData]=useState(null);
function fetchMarksData()
{
let url=/api/getMarks/+studentID
axios
.get(url)
.then(output=> {
setMarksData(output.data);
}
}
return (
<div>
<label>{addressDetails.cityName}</label>
<label>{marksData.marks}</label>
<render other details here>
</div>)
}
export default Student;
I have created a test as follows
test('Make sure student component renders for City testCity',()=>{
render(<Student gradeDetails={grdDetails} addressDetails={addDetails}/>);
const cityExists = screen.findByDisplayValue(/testCity/i);
expect(cityExists).toBeInTheDocument();
My questions are:
- How to see the rendered DOM (HTML) to make sure the component is rendered successfully?
- Student component also has a axios API call "getMarks()". Do I need to mock that API also so that Student component will be rendered? How to do that?
- When I call
expect(cityExists).toBeInTheDocument();
, I am getting error message "Received has value {}" so i suspect that the component is not rendered successfully. In that case I need to see the HTML.
答案1
得分: 0
你可以使用 debug
查看 DOM。
const { debug } = render(<Student gradeDetails={grdDetails} addressDetails={addDetails}/>);
debug()
是的,你需要模拟 API。MSW 是最好的方法,可以参考这个链接:https://mswjs.io/docs/getting-started/integrate/node#using-manual-setup。这里有一篇很好的指南:https://www.stackbuilders.com/blog/testing-react-components-with-testing-library-and-mock-service-worker/
一旦在 jest 中设置好,你可以在 beforeAll
中这样做:
rest.get('/api/getMarks/:studentID', (req, res, ctx) => {
return res(ctx.json({ })) // 将模拟数据放入对象中
})
对于第三个问题,我无法回答,因为我看不到 testCity
在你的组件中出现在哪里。
英文:
You can use debug
to see the DOM
const { debug } = render(<Student gradeDetails={grdDetails} addressDetails={addDetails}/>);
debug()
Yes, you need to mock the API. MSW is the best way of doing this https://mswjs.io/docs/getting-started/integrate/node#using-manual-setup. Here is a nice guide: https://www.stackbuilders.com/blog/testing-react-components-with-testing-library-and-mock-service-worker/
Once setup in jest you can just do this in a beforeAll
:
rest.get('/api/getMarks/:studentID', (req, res, ctx) => {
return res(ctx.json({ })) // PUT MOCKED DATA INSIDE THE OBJECT
})
The third question I can't answer as I can't see where testCity
appears in your component.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论