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

【问题标题】：Unit test using react testing library to test components单元测试使用反应测试库来测试组件
【发布时间】：2021-04-06 19:55:57
【问题描述】：

请问如何使用反应测试库为我的组件编写单元测试？

我做错了什么？

组件：

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 />}
    </>

【问题讨论】：

您遇到了什么问题？运行此测试时会发生什么？
作为一般提示，使用screen.debug() 在测试期间的任何时候查看 DOM 的样子。
我想看看我写的测试是否正确。还有其他建议吗？测试对吗？我不知道如何编写单元测试。也许我错过了“描述”。
澄清一下，你从来没有用任何语言写过单元测试吗？我认为您应该查看单元测试的一般介绍。单元测试是一个重要的话题，所以你很高兴学习它，但 StackOverflow 最适合解决特定的、有针对性的问题。
您需要确定您要测试的具体内容。您的问题中没有明确说明这一点。任何给定的组件都有许多可能的测试，所以“我如何测试我的组件”是一个糟糕的问题。按照同样的思路，您还没有说要测试哪个组件。您的测试直接呈现 ErrorModal 组件，但我猜您的意思是呈现登录组件。但是该登录组件不完整，并且缺少一些可能对编写您要编写的测试至关重要的代码（特别是showError 的设置方式）。

标签： reactjs typescript unit-testing react-testing-library

【解决方案1】：

您的实际测试根本不会呈现登录组件。

测试使用消息“oi”呈现 ErrorModal 组件。

鉴于您的测试结构，该测试不应测试“出现问题”，因为它不是您传递给组件的文本，它实际上是 'oi'。

【讨论】：

谢谢。那么我能做什么呢？我需要做什么。我该如何编写测试？在 D 之前我从来没有写过测试：
test('renders 出错了', () => { render(); const element = screen.getByTestId("id"); 期望(element).toEqual("id: 出了点问题"); })