@testing-library/reactをモーダル実装のテストを書きたい

実現したいこと

@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 コメント