tengo un siguiente componente
const ModalComponent = () => { const [visible, setVisible] = useState(false); return ( <> <Button type="primary" onClick={() => setVisible(true)}> Open Modal </Button> <Modal title="Modal title" centered visible={visible} onOk={() => setVisible(false)} onCancel={() => setVisible(false)} > content </Modal> </> ); }; y este modal se cierra cuando se presiona la tecla ESC . Sin embargo, mi prueba falla por alguna razón. mi prueba es:
it("closes modal on ESC press", async () => { render(<ModalComponent />) expect( await screen.findByText( "content", ), ).toBeVisible(); fireEvent.keyDown(document, { key: "Escape", keyCode: 27 }); await waitFor(async () => { expect( await screen.findByText( "content", ), ).not.toBeVisible(); }); });El elemento aún es visible
Dado que el componente modal antd usa rc-dialog , hay un atributo role='dialog' en el elemento div del componente Panel .
También marque el caso de prueba "esc para cerrar" , sabrá que el evento del teclado no se agrega al document , sino al elemento que tiene .rc-dialog className.
antd pasa su propio prefixCls al componente rc-dialog . Por lo tanto, ya no hay .rc-dialog className cuando usa antd modal. Así que no deberíamos usar .rc-dialog como selector para encontrar el elemento, podríamos usar role='dialog' mencionado anteriormente. RTL proporciona una consulta getByRole para hacer esto.
Solución final: index.tsx :
import { Button, Modal } from 'antd'; import React from 'react'; import { useState } from 'react'; export const ModalComponent = () => { const [visible, setVisible] = useState(false); return ( <> <Button type="primary" onClick={() => setVisible(true)}> Open Modal </Button> <Modal title="Modal title" centered visible={visible} onOk={() => setVisible(false)} onCancel={() => setVisible(false)} > content </Modal> </> ); }; index.test.tsx :
import { fireEvent, render, screen } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; import React from 'react'; import { ModalComponent } from '.'; describe('ModalComponent', () => { test('should pass', async () => { render(<ModalComponent />); const openModalButton = screen.getByText(/open modal/i); fireEvent.click(openModalButton); expect(await screen.findByText('content')).toBeVisible(); const dialog = screen.getByRole('dialog'); fireEvent.keyDown(dialog, { keyCode: '27' }); expect(await screen.findByText('content')).not.toBeVisible(); }); });Resultado de la prueba:
PASS stackoverflow/73147451/index.test.tsx (11.646 s) ModalComponent ✓ should pass (158 ms) -----------|---------|----------|---------|---------|------------------- File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s -----------|---------|----------|---------|---------|------------------- All files | 90 | 100 | 75 | 88.89 | index.tsx | 90 | 100 | 75 | 88.89 | 16 -----------|---------|----------|---------|---------|------------------- Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 12.199 sversión del paquete:
"antd": "^4.16.12",