javascript - 如何测试 ErrorBoundary 的后备组件？-6ren

javascript - 如何测试 ErrorBoundary 的后备组件？

转载作者：行者123 更新时间：2023-12-03 13:40:23

24

4

我有这个组件:

import React, { lazy, Suspense } from 'react';
import { ErrorBoundary } from '../ErrorBoundary';

const FALLBACK = <svg aria-label="" data-testid="icon-fallback" viewBox="0 0 21 21" />;

const ERROR = (
    <svg data-testid="icon-notdef" viewBox="0 0 21 21">
        <path d="M0.5,0.5v20h20v-20H0.5z M9.1,10.5l-6.6,6.6V3.9L9.1,10.5z M3.9,2.5h13.2l-6.6,6.6L3.9,2.5z M10.5,11.9l6.6,6.6H3.9 L10.5,11.9z M11.9,10.5l6.6-6.6v13.2L11.9,10.5z" />
    </svg>
);

export const Icon = ({ ariaLabel, ariaHidden, name, size }) => {
    const LazyIcon = lazy(() => import(`../../assets/icons/${size}/${name}.svg`));
    return (
        <i aria-hidden={ ariaHidden }>
            <ErrorBoundary fallback={ ERROR }>
                <Suspense fallback={ FALLBACK }>
                    <LazyIcon aria-label={ ariaLabel } data-testid="icon-module" />
                </Suspense>
            </ErrorBoundary>
        </i>
    );
};

我正在尝试测试传入不存在的 SVG 的条件，进而渲染 <ErrorBoundary />倒退。 ErrorBoundary 在浏览器中有效，但在我的测试中无效。
这是失败的测试:

test('shows notdef icon', async () => {
    const { getByTestId } = render(<Icon name='doesnt-exist' />);
    const iconModule = await waitFor(() => getByTestId('icon-notdef'));
    expect(iconModule).toBeInTheDocument();
});

我收到此错误消息:

TestingLibraryElementError: Unable to find an element by: [data-testid="icon-notdef"]”.

如何在我的测试中访问 ErrorBoundary 后备 UI？
编辑
这是 <ErrorBoundary /> 的代码零件:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export class ErrorBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = {
            error: '',
            errorInfo: '',
            hasError: false,
        };
    }

    static getDerivedStateFromError(error) {
        return { hasError: true, error };
    }

    componentDidCatch(error, errorInfo) {
        console.error({ error, errorInfo });
        this.setState({ error, errorInfo });
    }

    render() {
        const { children, fallback } = this.props;
        const { error, errorInfo, hasError } = this.state;

        // If there is an error AND a fallback UI is passed in…
        if (hasError && fallback) {
            return fallback;
        }

        // Otherwise if there is an error with no fallback UI…
        if (hasError) {
            return (
                <details className="error-details">
                    <summary>There was an error.</summary>
                    <p style={ { margin: '12px 0 0' } }>{error && error.message}</p>
                    <pre>
                        <code>
                            {errorInfo && errorInfo.componentStack.toString()}
                        </code>
                    </pre>
                </details>
            );
        }

        // Finally, render the children.
        return children;
    }
}

ErrorBoundary.propTypes = {
    children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
    fallback: PropTypes.node,
};

…这是我在测试中得到的 DOM 的完整错误:

shows notdef icon

    TestingLibraryElementError: Unable to find an element by: [data-testid="icon-notdef"]

    <body>
      <div>
        <i
          aria-hidden="false"
          class="Icon Icon--sm"
        >
          <span
            aria-label=""
            data-testid="icon-module"
          />
        </i>
      </div>
    </body>

    <html>
      <head />
      <body>
        <div>
          <i
            aria-hidden="false"
            class="Icon Icon--sm"
          >
            <span
              aria-label=""
              data-testid="icon-module"
            />
          </i>
        </div>
      </body>
    </html>Error: Unable to find an element by: [data-testid="icon-notdef"]

最后，我的 SVG 模拟:

import React from 'react';

const SvgrMock = React.forwardRef(
    function mySVG(props, ref) {
        return <span { ...props } ref={ ref } />;
    },
);

export const ReactComponent = SvgrMock;
export default SvgrMock;

最佳答案

正如评论中所讨论的，模拟很可能避免了错误。尝试使用抛出错误的新模拟重新模拟 SVG 文件。

// tests that require unmocking svg files
describe('non existent svg', () => {
  beforeAll(() => {
    jest.mock('.svg', () => {
      throw new Error('file not found')
    });
  });
  
  test('shows notdef icon', async () => {
    const { getByTestId } = render(<Icon name='doesnt-exist' />);
    const iconModule = await waitFor(() => getByTestId('icon-notdef'));
    expect(iconModule).toBeInTheDocument();
  });

  afterAll(() => jest.unmock('.svg'))
})

有必要包装它以确保仅在测试期间重新模拟 SVG 文件( beforeAll - afterAll)，以免干扰其余测试。

关于javascript - 如何测试 ErrorBoundary 的后备组件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66233796/

24

4

0

文章推荐： python - 在 Windows 上使用 MKL 编译 NumPy - DLL 加载失败

文章推荐： firebase - 如何使用获取的数据刷新 View - Firestore 和 SwiftUI

java:找不到主类:测试/测试。程序将会退出
我获得了一些源代码示例，我想测试一些功能。不幸的是，我在执行程序时遇到问题: 11:41:31 [linqus@ottsrvafq1 example]$ javac -g test/test.jav
r - 为什么两个ggplot对象通过all.equal()测试，但未通过same()测试？
我想测试ggplot生成的两个图是否相同。一种选择是在绘图对象上使用all.equal，但我宁愿进行更艰巨的测试以确保它们相同，这似乎是identical()为我提供的东西。但是，当我测试使用相同d
java - 以编程方式失败的 Maven 测试 JUnit5 测试
我确实使用 JUnit5 执行我的 Maven 测试，其中所有测试类都有 @ExtendWith({ProcessExtension.class}) 注释。如果是这种情况，此扩展必须根据特殊逻辑使测试
Node.js 编程工作流程 - 测试、代码、测试
在开始使用 Node.js 开发有用的东西之前，您的流程是什么？您是否在 VowJS、Expresso 上创建测试？你使用 Selenium 测试吗？什么时候？我有兴趣获得一个很好的工作流程来开发我
java - Mockito 测试 - 测试 write() 方法导致 NullPointerException
这个问题已经有答案了: What is a NullPointerException, and how do I fix it? (12 个回答) 已关闭 3 年前。基于示例here ，我尝试为我的
laravel - 测试 Vue.js 组件 - Laravel 测试
我正在考虑测试一些 Vue.js 组件，作为 Laravel 应用程序的一部分。所以，我有一个在 Blade 模板中使用并生成 GET 的组件。在 mounted 期间请求生命周期钩子(Hook)。假
c++ - 测试 t=测试(); C++98 中会发生什么？
考虑以下程序: #include struct Test { int a; }; int main() { Test t=Test(); std::cout<
c# - 为什么我应该同时进行单元测试和 Web 测试(而不仅仅是 Web 测试)？
我目前的立场是:如果我使用 web 测试(在我的例子中可能是通过 VS.NET'08 测试工具和 WatiN)以及代码覆盖率和广泛的数据来彻底测试我的 ASP.NET 应用程序，我应该不需要编写单独的
c# - 在测试 1、测试 10、测试 2 中对包含数字的字符串进行排序的好方法
我正在使用 C#、.NET 4.7 我有 3 个字符串，即。 [test.1, test.10, test.2] 我需要对它们进行排序以获得: test.1 test.2 test.10 我可能会得到
Android espresso 测试 - 测试 recyclerview 项目内的 View 是否可见
我有一个 ID 为“rv_list”的 RecyclerView。单击任何 RecyclerView 项目时，每个项目内都有一个可见的 id 为“star”的 View 。我想用 expresso
node.js - 使用 Jest 测试 firebase 函数时的 Flakey 测试
我正在使用 Jest 和模拟器测试 Firebase 函数，尽管这些测试可能来自竞争条件。所谓 flakey，我的意思是有时它们会通过，有时不会，即使在同一台机器上也是如此。测试和函数是用 Type
javascript - AngularJS 测试 - 使用 $http 和 then() 测试 AngularUI 的提前输入
我在测试我与 typeahead.js ( https://github.com/angular-ui/bootstrap/blob/master/src/typeahead/typeahead.js
ios - 测试 iOS 应用程序时，Teamcity Step 测试(命令行)失败
我正在尝试使用 Teamcity 自动运行测试，但似乎当代理编译项目时，它没有正确完成，因为当我运行运行测试之类的命令时，我收到以下错误: fatal error: 'Pushwoosh/PushNo
api - 测试 rest 或 graphql API 时如何运行 cucumber 测试
这是我第一次玩 cucumber ，还创建了一个测试和 API 的套件。我的问题是在测试 API 时是否需要运行它？例如我脑子里有这个，启动 express 服务器作为后台任务然后当它启动时(我
android - 将所有 android 测试(单元/集成/UI 测试)放入单个测试项目中是最佳做法吗？
我有我的主要应用程序项目，然后是我的测试的第二个项目。将所有类型的测试存储在该测试项目中是一种好的做法，还是应该将一些测试驻留在主应用程序项目中？我应该在我的主项目中保留 POJO JUnit(测试
ruby-on-rails - 用户 has_many 测试，测试 has_many 成绩。如何计算成绩？
我正在努力弄清楚如何实现这个计数。模型是用户、测试、等级用户 has_many 测试，测试 has_many 成绩。每个等级都有一个计算分数(strong_pass、pass、fail、stron
android - 使用 MockWebServer 测试 OkHttp 并使用 Buffer body 测试 MockResponse
我正在尝试测试一些涉及 OkHttp3 的下载代码，但不幸失败了。目标:测试下载图像文件并验证其是否有效。平台:安卓。此代码可在生产环境中运行，但测试代码没有任何意义。产品代码 class Fil
xamarin.ios - UI 测试，无法运行 iOS ui 测试 - 无法确定 X 的模拟器版本
当我想为 iOS 运行 UI 测试时，我收到以下消息: SetUp : System.Exception : Unable to determine simulator version for X 堆
ios - 在 iOS 中使用 Firebase Remote Config 测试/验证 A/B 测试
我正在使用 Firebase Remote Config 在 iOS 上设置 A/B 测试。一切都已设置完毕，我正在 iOS 应用程序中读取服务器端默认值。但是在多个模拟器上尝试，它们都读取了默认
javascript - 如何用 Jest 测试 asnyc 代码(或用 jsdom 测试 "image.onload")
[已编辑]:我已经用 promise 方式更改了我的代码。我正在写 React with this starter 由 facebook 创建，我是测试方面的新手。现在我有一个关于图像的组件，它有

首页

博学

6Ren·AI

商城

javascript - 如何测试 ErrorBoundary 的后备组件？