reactjs 使用React 16的React测试库

utugiqy6  于 2023-03-01  发布在  React
关注(0)|答案(1)|浏览(182)

我们有一个基于React 16的项目,它包含了react-scripts test,但是我不明白使用的是哪个测试框架,那么我们可以使用react测试库来测试react 16.4吗?
我想知道我如何测试react v16.4中编写的react UI。今天如果我谷歌react测试,我得到的结果大多是react测试库和react钩子。尝试设置酶,但我从babel得到错误,我的组件导入css import './style.css'
因此,我想知道在React v16.4上使用redux测试react组件的最佳方法。如果有人能告诉我如何在react v16.4中设置测试的教程或文档(如果可以使用react-testing-library设置),这将是很有帮助的。
目前还没有升级react的选项。
先谢了。

dbf7pr2w

dbf7pr2w1#

是的,您可以使用React测试库来测试用React v16.4编写的React UI。React测试库是一个受欢迎的测试库,无论版本如何,它都可以与React很好地配合使用。
要设置React测试库,您需要将其与Jest(一个流行的JavaScript测试框架)沿着安装。以下是您的操作方法:
安装Jest和React测试库:

npm install --save-dev jest @testing-library/react

在与组件相同的目录中创建一个tests目录,并为组件创建一个测试文件(例如MyComponent.test.js)。
在测试文件中,导入必要的模块:

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

使用React Testing Library中的render函数编写测试,以呈现组件并与之交互:

describe('MyComponent', () => {
  test('renders the component', () => {
    const { getByText } = render(<MyComponent />);
    const element = getByText('Hello, world!');
    expect(element).toBeInTheDocument();
  });
});

在本例中,我们使用render函数呈现MyComponent,并检查它是否包含文本“Hello,world!"。
注意为了测试导入CSS文件的组件,你可能需要配置Jest来正确地处理这些文件,一个选择是在测试过程中使用jest-css-modules这样的包来转换你的CSS文件。
有许多资源可用于学习如何使用React Testing Library,包括官方文档(https://testing-library.com/docs/react-testing-library/intro/)、各种教程和博客文章以及在线课程。您还可以查看官方Redux文档(https://redux.js.org/recipes/writing-tests),了解有关使用Redux测试组件的提示。

相关问题