單元測試使用反應測試庫來測試組件

Question

請問如何使用反應測試庫為我的組件編寫單元測試？

我究竟做錯了什么？

零件：

const ErrorModal = (props: {message: string}) => {

    const { message } = props;
  
    return (
      <ErrorModalStyled>
        <ErrorMessageStyled data-testid="id">{ message }</ErrorMessageStyled>
      </ErrorModalStyled>
    );
  }
  
  export default ErrorModal;*/

我的測試：

import { render, screen } from '@testing-library/react';
import ErrorModal from '../components/ErrorModal/ErrorModal';

test('renders Something went wrong', () => {
    render(<ErrorModal message="oi" />);
    const element = screen.getByTestId("id");
    expect(element).toEqual("id: Something went wrong");
}

我的登錄組件：

</DeviceLoginListStyled>
      { showError && <ErrorModal message="Something went wrong" />}
      { isLoading && <LoadingModal />}
    </>

Answer 1

您的實際測試根本不會呈現登錄組件。

該測試使用消息“oi”呈現 ErrorModal 組件。

鑒於您的測試結構，該測試不應測試“出現問題”，因為它不是您傳遞給組件的文本，實際上是“oi”。