Estoy usando NextJS y estoy tratando de probar el componente ClientPortal . Estoy usando Jest y React Testing Library para probar.
Aquí está el componente ClientPortal :
import { useEffect, useRef, useState } from "react"; import { createPortal } from "react-dom"; export default function ClientPortal({ children, selector }) { const ref = useRef(); const [mounted, setMounted] = useState(false); useEffect(() => { ref.current = document.querySelector(selector); setMounted(true); }, [selector]); return mounted ? createPortal(children, ref.current) : null; }¿Cómo se puede probar esto usando Jest?
Primero, asegúrese de que la configuración de testEnvironment sea jsdom . Para jestjs v26, es jsdom por defecto. Para jestjs v27, siga esta guía para establecer la configuración de testEnvironment .
El método de prueba es muy sencillo. Cree un contenedor DOM para almacenar el portal. Consulta el elemento DOM y afirma si existe.
index.jsx :
import { useEffect, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; export default function ClientPortal({ children, selector }) { const ref = useRef(); const [mounted, setMounted] = useState(false); useEffect(() => { ref.current = document.querySelector(selector); setMounted(true); }, [selector]); return mounted ? createPortal(children, ref.current) : null; } index.test.jsx :
import React from 'react'; import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; import ClientPortal from './'; function TestChild() { return <div>child</div>; } describe('69550058', () => { test('should pass', () => { const main = document.createElement('main'); const portalContainer = document.createElement('div'); portalContainer.id = 'portal-container'; document.body.appendChild(portalContainer); const { container } = render( <ClientPortal selector={'#portal-container'}> <TestChild /> </ClientPortal>, { container: document.body.appendChild(main) } ); expect(screen.getByText(/child/)).toBeInTheDocument(); expect(portalContainer.innerHTML).toEqual('<div>child</div>'); expect(container).toMatchInlineSnapshot(`<main />`); }); });resultado de la prueba:
PASS examples/69550058/index.test.jsx (8.941 s) 69550058 ✓ should pass (33 ms) -----------|---------|----------|---------|---------|------------------- File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s -----------|---------|----------|---------|---------|------------------- All files | 100 | 100 | 100 | 100 | index.jsx | 100 | 100 | 100 | 100 | -----------|---------|----------|---------|---------|------------------- Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 1 passed, 1 total Time: 9.624 s, estimated 11 sversiones del paquete:
"jest": "^26.6.3", "react": "^16.14.0", "react-dom": "^16.14.0", "@testing-library/react": "^11.2.2",