@testing-library/react TDD, react-bootstrap : 这种测试有用还是只是时间松散

Question

我尝试用 TDD 视图编写我的代码，我一直遇到同样的问题，我应该测试什么，我不应该测试什么，目标是基于 react-bootstrap 使用 TDD，我的组件将只是一个带有 less 属性的包装器，以使其变得简单，我从 react-bootstrap 中 Navbar 的品牌子组件开始。最终目标是测试反映用户应该测试的内容，例如导航中存在具有良好 src 和 alt 属性的品牌徽标 img。

这些测试是有趣的还是应该避免的？

我的测试

import React from 'react';
import { render } from '@testing-library/react';
import BrandNav from './BrandNav';

test('testing brand navigation', () => {
    const altProp = 'message to show if image unavailable',
        srcProp = 'relativeFilePath',
        host = window.location;

    const { getByAltText } = render(<BrandNav alt={altProp} src={srcProp} />);

    const brandLogo = getByAltText(altProp);
    expect(brandLogo.src).toEqual(`${host}${srcProp}`);
});

我的组件

import React from 'react';
import { Navbar } from 'react-bootstrap';

const BrandNav = ({ alt, src }) => {
    return (
        <Navbar.Brand>
            <img alt={alt} src={src} />
        </Navbar.Brand>
    );
};

export default BrandNav;

Answer 1

React 测试大致分为两类：

确认您的组件已正确连接在一起
断言您的组件正确处理内部逻辑

您的测试属于第一类，因为它确保您将 props 正确传递给基础 HTML 元素。当您将 props 通过不止一层时，它通常更有价值，但这是一个很好的测试。它非常基础，但不应成为障碍，将这样的测试作为 TDD 过程的一部分编写是有意义的。

如果您发现某项测试对您的影响大于它的帮助，您可以随时将其删除。

第二类测试的示例如下：

// BrandNav.js
const BrandNav = ({ alt, src, textOnly }) => {
    return (
        <Navbar.Brand>
            {textOnly ? <span>My Brand</span> : <img alt={alt} src={src} />}
        </Navbar.Brand>
    );
};

//BrandNav.test.js
test('shows only image when textOnly is FALSE', () => {
    const altProp = 'message to show if image unavailable';
    const srcProp = 'relativeFilePath';

    const { getByAltText, queryByText } = render(
      <BrandNav
        alt={altProp}
        src={srcProp}
        textOnly={false}
      />
    );

    const brandLogo = getByAltText(altProp);
    expect(brandLogo.src).toMatch(srcProp);
    expect(queryByText('My Brand')).toBeFalsy();
});

test('shows only text when textOnly is TRUE', () => {
    const altProp = 'message to show if image unavailable';
    const srcProp = 'relativeFilePath';

    const { queryByAltText, queryByText } = render(
      <BrandNav
        alt={altProp}
        src={srcProp}
        textOnly
      />
    );

    expect(queryByAltText(altProp)).toBeFalsy();
    expect(queryByText('My Brand')).toBeTruthy();
});

同样，这非常简单，但随着逻辑变得越来越复杂，它会告诉您您的组件仍在正常工作，如果您先测试构建组件，这绝对有意义。

编辑：在尝试决定您应该编写多少测试时要考虑的其他一些因素（这可能有助于回答您的第二个问题）：

1.这个项目的使用范围有多大？ 如果是个人项目，可能不需要那么多测试。如果您正在编写一个供其他人使用的库，您将需要更高的测试覆盖率。例如，react-bootstrap 在 their GitHub repo 中有很多简单的测试。他们想知道是否有任何故障，甚至是最小的单元，因为许多人依赖于他们的组件正常工作。您还可以看到他们的测试涵盖了您所询问的一些事情 ("test brand is present")，因此您无需编写测试来涵盖这些内容。

2。一般来说，您对编写测试有多熟悉？如果您只是在学习编写测试，我认为编写这样简单的测试是有价值的，原因如下：

一个。您将更加熟悉测试库 B. 你可能最终会写太多的测试，感觉到那个痛点，并且知道你将来可以避免哪些测试。

测试不仅仅用于覆盖范围。我现在找不到它，但在另一个 Whosebug post 中有一句令人难忘的引述，大意是："The benefit of TDD is not to have a bunch of tests. That's a nice side effect. The benefit of TDD is to have code that's more cleanly designed."

您编写测试的经验越多，您就越知道应该避免什么。套用 Kent Beck（《示例测试驱动开发》的作者）的话，"I don't always write tests for very small steps, but when things get weird it's nice to know that I can."

Answer 2

我认为那种测试没有用。并没有真正以 TDD 方式推动您的开发，因为您的测试应该告诉您下一步该做什么。

我建议您遵循以下教程：https://learntdd.in/react/

@testing-library/react TDD, react-bootstrap : 这种测试有用还是只是时间松散

@testing-library/react TDD, react-bootstrap : Is this kind of test useful or just time loose

reactjs

jestjs

tdd

react-bootstrap

react-testing-library