मैं कर रहा हूँ काफी नए प्रतिक्रिया करने के लिए-परीक्षण-लाइब्रेरी और आम तौर पर परीक्षण । मैं परीक्षण करना चाहते हैं एक घटक है कि डेटा fetches से एक एपीआई में 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>