実現したいこと
@testing-library/reactを使ってモーダルのテストを書きたいです。
内容としては、
Parentコンポーネントにリンクとボタンがあり、そのリンクを押すとモーダルが表示されます。
リンクが押されるまでボタンは非活性化状態で、リンクが開きモーダルが閉じられるタイミングでボタンが活性化状態になります。
そのコンポーネントのテストを行いたいです。
発生している問題・分からないこと
@testing-library/reactを使ってテストを書くのですが、テストを書いたことがほとんどなく、
ドキュメントや実装例を見てるのですがうまくいきません。
該当のソースコード
Parent.jsx
1import { useState } from 'react'; 2import ModalItem from './ModalItem'; 3 4export const Parent = () => { 5 const [isOpen, setIsOpen] = useState(false); 6 const [disabled, setDisabled] = useState(true); 7 8 const openModal = () => { 9 setIsOpen(true); 10 } 11 12 const closeModal = () => { 13 setIsOpen(false); 14 setDisabled(false); 15 } 16 17 return ( 18 <div> 19 <span onClick={openModal}>ここがリンク</span> 20 <ModalItem handleClose={closeModal} /> 21 <button disabled={disabled}>ボタン</button> 22 </div> 23 ); 24}
ModalItem.jsx
1import React from 'react'; 2import { Modal } from '@mui/material'; 3 4export const ModalItem = ({ isOpen, handleClose }) => { 5 return ( 6 <Modal open={isOpen} onClose={handleClose}> 7 <span>ここがモーダル</span> 8 <button onClick={handleClose}>閉じる</button> 9 </Modal> 10 ); 11}
Parent.test.jsx
1import { render } from '@testing-library/react'; 2import ModalItem from './ModalItem'; 3import Parent from './Parent'; 4 5describe('テスト', () => { 6 it('モーダルが開いて、ボタンが活性化されること', () => { 7 const parentComponent = render(<Parent />); 8 9 expect(parentComponent.baseElement).toBeInTheDocument(); 10 11 const parentLink = parentComponent.getByText('ここがリンク'); 12 expect(parentLink).toBeInTheDocument(); 13 14 // ここから先がわからないです。fireEventでリンクをクリックさせても、どうすればstateが更新され、モーダルが開いてることをテストでき、再度閉じるテストの書き方がわからないです 15 await act(async () => { 16 fireEvent.click(parentLink); 17 }); 18 }); 19});
試したこと・調べたこと
上記の詳細・結果
googleで@testing-library/react モーダルや、jest モーダル testと検索してもほとんどヒットしませんでした。
試したこととしては、
test.jsxで以下のようにやってみたのですが、固定値でtrueを指定してしまうので
リンクを押したらtrue/falseに切り替える方法がわかりませんでした。
また、true/falseを切り替えた際にモーダルコンポーネントが表示されているか、されていないかを確認する方法もわかりませんでした。
const parentComponent = render(<Parent />); const ModalComponent = render(<Modal isOpen={true} handleClose={jest.fn} />);
補足
特になし
0 コメント