# @bigtest/react 中文文档
规范地址：https://npmcn.com/package/%40bigtest/react/
版本：0\.1\.2
npm 元数据更新时间：2026-09-30T21:07:28.339Z
中文译文更新时间：2026-11-08T02:23:54.453Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40bigtest/react
原文对照：https://npmcn.com/package/%40bigtest/react/?lang=original
项目主页：https://github.com/bigtestjs/react#readme
源码仓库：https://github.com/bigtestjs/react
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：81.3 kB，12 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：1 个
- peer 依赖：react ^16\.0\.0，react-dom ^16\.0\.0
- 首次发布：2018-05-30T18:43:01.136Z
- 最新版本发布：2018-06-20T23:51:10.577Z
- 近 30 天下载量：3522（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 0 个）
## 中文简介
反应 DOM 帮助测试大项
## 安装
```sh
npm install @bigtest/react
```
也可以使用：`pnpm add @bigtest/react`、`yarn add @bigtest/react`、`bun add @bigtest/react`
## README
# @ bigtest/反应 [](https://circleci.com/gh/bigtestjs/react/tree/master) [](https://gitter.im/bigtestjs/react?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
反应 DOM 帮助测试大项
## 这是什么?
这一一揽子计划旨在提供一套帮助,以方便: 接受测试您的反应应用程序.
这个 `mount` 帮助者在将组件安装到 刚插入的 DOM 节点 。 以后的用途会清理之前的任何用途 挂载组件.
```javascript
import { mount } from '@bigtest/react';
import Button from '../src/components/button';
describe('My Button', () => {
// `mount` returns a promise that resolves after rendering
beforeEach(() => mount(() => ));
it('renders', () => {
expect(document.querySelector('.button')).to.exist;
});
});
```
这个 `setupAppForTesting` 帮助不仅挂载应用程序 组件,但将以组件实例解决 提供内存历史对象 [反应 路由器](https://github.com/ReactTraining/react-router) 用于 测试.
```javascript
import { setupAppForTesting } from '@bigtest/react';
import App from '../src/app';
describe('My Application', () => {
let app;
beforeEach(async () => {
app = await setupAppForTesting(App);
});
it('renders', () => {
expect(document.querySelector('#app')).to.exist;
});
it('has a history prop', () => {
// this prop is only provided if defined in `propTypes`
expect(app.props).to.have.property('history');
});
});
```
这个 `visit` 帮助者( e)`visit`, (中文(简体) ), `goBack`, (中文(简体) ), `goForward`,以及 `location`(中文(简体) ) 仅使用后工作 `setupAppForTesting` 和接口 应用程序的 `history` 航道之间的道具.
```javascript
import { setupAppForTesting, visit, location } from '@bigtest/react';
import App from '../src/app';
describe('My Application', () => {
beforeEach(() => setupAppForTesting(App));
describe('navigating', () => {
beforeEach(() => visit('/some-route'));
it('is at the new route', () => {
expect(location()).to.have.property('pathname', '/some-route');
});
});
});
```
这个 `cleanup` 帮助器在每次的开始时被调用 `mount` 财务报告和审定财务报表 `setupAppForTesting` 调用以清理任何先前挂载的组件 或申请。 如果你需要清洁,也可以自己用 上面的前置组件你自己.
```javascript
import { mount, cleanup } from '@bigtest/react';
import Button from '../src/components/button';
describe('My Button', () => {
beforeEach(() => mount(() => ));
// it's best not to do this so that you can investigate and play
// with your component for debugging purposes after a test runs
afterEach(() => cleanup());
// ...
});
```
### 选项
两者 `mount` 财务报告和审定财务报表 `setupAppForTesting` 接受散列 `options` 作为 第二个论点.
```javascript
mount(Component, {
// used as the ID of the newly inserted DOM node
mountId: 'testing-root',
// where to insert the new DOM node
rootElement: document.body,
// called before the component is mounted; if a promise is returned,
// the component will mount after it resolves
setup: () => {},
// called during the next `cleanup` invocation, either at the
// beginning of the next `mount` or `setupAppForTesting` call, or
// when invoking `cleanup` directly; like `setup`, any returned
// promise will cause it to wait until resolving
teardown: () => {}
})
```
此外, `setupAppForTesting` 接受一个 `props` 选项 将任何用户定义的道具传递到应用程序组件.
```javascript
setupAppForTesting(App, {
props: {
store: createStore(),
// you can provide your own history object as well
history: createHistory(historyOptions)
}
})
```
## 可续用性
对于测试您的应用程序时最优化的经验,任何 需要不存在于组件中的应用程序逻辑 寿命周期钩应可再使用。 要么提供 所需资源 `setup` 财务报告和审定财务报表 `teardown` 选项,或将逻辑移入 组件生命周期钩.
除此之外,利用 `setupAppForTesting` 在您自己的测试助手中, 任何其他 有必要的设置被照顾。 也让我们不必 导入我们的应用程序并复制每个测试文件中的设置逻辑 .
```javascript
// tests/helpers.js
import { setupAppForTesting } from '@bigtest/react';
export { visit, goBack, goForward, location } from '@bigtest/react';
import App from '../src/app';
import createServer from './mocks/server';
export function setupApplicationForTesting() {
beforeEach(async function () => {
this.app = await setupAppForTesting(App, {
setup: () => this.server = createServer(),
teardown () => this.server.shutdown()
});
});
}
```
## 更好的测试
虽然这些助手允许您多次挂载您的申请 测试,与您的应用程序交互也可以是麻烦的.
[`@bigtest/interactor`](https://github.com/bigtestjs/interactor) 提供与应用程序各个部分互动的简单方式 任何浏览器,就像一个用户 会与您的应用程序交互。 单位 事实上,可堆肥的相互作用器是测试的完美伴奏 由可堆肥组件制作的应用程序.
```javascript
import { setupAppForTesting } from '@bigtest/react';
import App from '../src/app';
import HomePageInteractor from './interactors/home';
describe('My Application', () => {
const home = new HomePageInteractor();
beforeEach(() => setupAppForTesting(App))
it('has a fancy button', () => {
expect(home.button.isPresent).to.be.true;
expect(home.button.isFancy).to.be.true;
});
});
```
看看这个 [`@bigtest/interactor`](https://github.com/bigtestjs/interactor) 还原 获取更多关于互动器的信息,以及它们是如何工作的.
## 常见问题
### @bigtest/react 是什么？
反应 DOM 帮助测试大项
### 如何安装 @bigtest/react？
在项目目录运行 npm install @bigtest/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.0\.0）、react-dom（^16\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @bigtest/react 支持 TypeScript 吗？
该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/bigtest\_\_react 是否存在。
### @bigtest/react 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @bigtest/react 可以商用吗？
@bigtest/react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @bigtest/react 的下载量有多少？
根据 npm 官方下载统计，@bigtest/react 在 2026/10/08 – 2026/11/06 这 30 天内被下载 3,522 次，日均约 117 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @bigtest/react 还在维护吗？
最新版本 0\.1\.2 发布于 2018/06/21（8 年前）；至今共发布 3 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/05/31。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。