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

Question

bounty到期在6天内。这个问题的答案有资格获得+ 50声望赏金。Yoamb正在寻找来自信誉良好的来源的答案。

我尝试用TDD视图编写代码，我一直都遇到相同的问题，我应该测试什么，我不应该测试什么，目标是制作一个基于带有TDD的react-bootstrap的导航栏，组件将只是具有较少属性的包装器，以使其变得简单，我首先从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;

我尝试用TDD视图编写代码，我一直都遇到相同的问题，我应该测试什么，我不应该测试什么，目标是制作一个基于带有TDD的react-bootstrap的导航栏， ...

Answer 1

反应测试大致分为两类：