ฉันค่อนข้างใหม่ที่จะทำอย่าง-การทดสอบ-ห้องสมุดและโดยปกติการทดสอบ ฉันต้องการทดสอบส่วนประกอบนั่น fetches ข้อมูลจากรูปแบบ api ใน useEffect จับเราเสร็จเรื่องรึยัง? งั้นมันขายมันในท้องถิ่นของรัฐ. มัน renders พวกนี้อาเรย์ข้อมูลกับอาเรย์.แผนที่แต่ผมทำได้ Error: Uncaught [TypeError: Cannot read properties of undefined (reading 'map')]
ข้อผิดพลาด ฉันอาจจะทำผิดของฉันอยู่ในห้องทดสอบฉันหาข้อมูลของมากมายแต่ไม่สามารถซ่อมมันได้
import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom'
import { rest } from 'msw';
import { setupServer } from 'msw/node';
import { OnePiece } from '.';
const server = setupServer(rest.get('server http address', (req, res, ctx) => {
const totalData = [
{ name: "doffy", price: 100, image: "image url" },
{ name: "lamingo", price: 500, image: "image url" }
];
return res(
ctx.status(200),
ctx.json({
data: { crew: totalData }
})
)
}))
beforeAll(() => server.listen());
afterAll(() => server.close());
beforeEach(() => server.restoreHandlers());
//console.log("mocking axios", axios)
describe('OnePiece', () => {
test('fetches the data from the API and correctly renders it', async () => {
//Here's probably where i fail. Please someone tell me the right way :)
await render(<OnePiece />)
const items = await screen.findAllByAltText('product-image');
expect(items).toHaveLength(2);
// screen.debug()
})
})
และด้านล่างนี้เป็นส่วนของรหัส useEffect และ totalData.แผนที่ในส่วนประกอบ:
const [totalData, setTotalData] = useState([]);
const [crew, setCrew] = useState('straw-hat-pirates');
useEffect(() => {
let isApiSubscribed = true;
const getOpData = async () => {
const getCrews = await axios.get('http address');
if (isApiSubscribed) {
let data = getCrews.data;
data = data[crew];
// console.log("data", data);
setTotalData(data);
}
}
getOpData();
return () => {
isApiSubscribed=false;
}
}, [crew])
.........
//in the return part
<ProductsWrapper>
{totalData.map((product, index) =>
<ProductCard key={index} name={product.name} price={product.price} imageUrl={product.image} />
)}
</ProductsWrapper>