Question

我该如何使用 React 测试库为我的组件编写单元测试？

我做错了什么？

组件：

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

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

1 个答案: