单元测试使用反应测试库来测试组件

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”。