# @closeio/backbone-testing-library 中文文档

规范地址：https://npmcn.com/package/%40closeio/backbone-testing-library/

版本：1\.0\.0
npm 元数据更新时间：2026-10-20T15:50:03.919Z
中文译文更新时间：2026-11-10T02:13:17.835Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40closeio/backbone-testing-library
原文对照：https://npmcn.com/package/%40closeio/backbone-testing-library/?lang=original
项目主页：https://github.com/closeio/backbone-testing-library#readme
源码仓库：https://github.com/closeio/backbone-testing-library

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：26.7 kB，7 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- Node.js 要求：\>=8
- 运行依赖：0 个
- peer 依赖：@testing-library/dom \>=6\.1\.0
- 首次发布：2020-12-22T13:23:17.640Z
- 最新版本发布：2020-12-22T13:23:18.024Z
- 近 30 天下载量：50291（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

DOM 与 API 映射 React 测试库的测试工具

## 安装

```sh
npm install @closeio/backbone-testing-library
```

也可以使用：`pnpm add @closeio/backbone-testing-library`、`yarn add @closeio/backbone-testing-library`、`bun add @closeio/backbone-testing-library`

## README

# 后骨测试库

[![NPM](https://img.shields.io/npm/v/@closeio/backbone-testing-library.svg)](https://www.npmjs.com/package/@closeio/backbone-testing-library) [![JavaScript Style Guide](https://img.shields.io/badge/code%20style-prettier-success)](https://prettier.io/)

DOM 测试设施 [`Backbone`](https://backbonejs.org/) 带有一个反射的 API [`React Testing Library`](https://github.com/testing-library/react-testing-library)。 。 。 .

### ![](https://close.com/static/img/close-logo-dark.svg)

有兴趣做这样的项目吗? [关闭](https://close.com/) 正在寻找 [伟大的工程师](https://jobs.close.com/) 加入我们的队伍!

## 你为什么想要这个... 差不多2021年了! 都快2021年了?

在关闭时,我们的应用程序仍有一大部分被写入 `Backbone` 我们非常小心 切换到 `React`我们创建了这个图书馆, 以此来撰写测试我们 `Backbone` 样式中的组件 `React Testing Library`。这意味着,当我们港口 组件结束,我们可以使用同样的测试 用非常微小的改变,所以 尽量减少我们的应用程序中的回归。 虽然我们不建议 建立一个全新的FE应用 与 `Backbone`我们开源 帮助其他想要转型的人 遗留代码库.

## 安装

此模块通过 [无](https://www.npmjs.com/) 与 [节点](https://nodejs.org/en/) 财务报告和审定财务报表 应安装为您的项目之一 `devDependencies`。 。 。 . 这个图书馆还有 `peerDependencies` 清单 `@testing-library/dom`数字 :

```
npm install --save-dev @closeio/backbone-testing-library @testing-library/dom
```

或者说

用于通过 [线条](https://yarnpkg.com/)

```
yarn add --dev @closeio/backbone-testing-library @testing-library/dom
```

您可能也有兴趣安装 `@testing-library/jest-dom` 这样你就可以 使用情况 [自定义相匹配者](https://github.com/testing-library/jest-dom)。 。 。 .

## 示例

```javascript
// models/HiddenMessageModel.js

import Backbone from 'backbone';

const HiddenMessageModel = Backbone.Model.extend({
  defaults: {
    message: '',
    showMessage: false,
  },
});

export default HiddenMessageModel;
```

```javascript
// views/HiddenMessageView.js

import Backbone from 'backbone';

const HiddenMessageView = Backbone.View.extend({
  events: {
    'change #toggle': 'setShowMessage',
  },

  initialize({ model }) {
    this.model = model;
    this.model.on('change', this.render.bind(this));
  },

  setShowMessage(e) {
    this.model.set('showMessage', e.target.checked);
  },

  template({ showMessage, message }) {
    return `<div>
      <label for="toggle">Show Message</label>
      <input
        id="toggle"
        type="checkbox"
        ${showMessage ? 'checked' : ''}
      />
      ${showMessage ? message : ''}
    </div>`;
  },

  render() {
    this.$el.html(this.template(this.model.attributes));
  },
});

export default HiddenMessageView;
```

```javascript
// views/HiddenMessageView.test.js

// these imports are something you'd normally configure Jest to import for you
// automatically. Learn more in the setup docs: https://testing-library.com/docs/react-testing-library/setup#cleanup
import '@testing-library/jest-dom';
// NOTE: jest-dom adds handy assertions to Jest and is recommended, but not required

import { render, fireEvent } from '@closeio/backbone-testing-library';

import HiddenMessageModel from '../models/HiddenMessageModel';
import HiddenMessageView from './HiddenMessageView';

test('shows the children when the checkbox is checked', () => {
  const testMessage = 'Test Message';
  const testModel = new HiddenMessageModel({
    message: testMessage,
  });

  // The queries you'd expect from React Testing Library are returned from render, as are
  // `view`, `container`, `baseElement`, `debug` and `unmount`. We also hook into React
  // Testing Library's `RTL_SKIP_AUTO_CLEANUP` const to auto unmount views in `afterEach`
  const { queryByText, getByLabelText, getByText } = render(HiddenMessageView, {
    model: testModel,
  });

  // query* functions will return the element or null if it cannot be found
  // get* functions will return the element or throw an error if it cannot be found
  expect(queryByText(testMessage)).toBeNull();

  // the queries can accept a regex to make your selectors more resilient to content tweaks and changes.
  fireEvent.click(getByLabelText(/show/i));

  // .toBeInTheDocument() is an assertion that comes from jest-dom
  // otherwise you could use .toBeDefined()
  expect(getByText(testMessage)).toBeInTheDocument();
});
```

## `render` 参数

-   `View` - 第一个论点是 `Backbone.View` 考级,会 由渲染函数分解
-   `options` - 可选 - 第二个参数是一个选项对象,有以下内容: 参数 :
    -   `container` - 可选 - 行为像 [RTL的电话 `container`](https://testing-library.com/docs/react-testing-library/api#container) 默认创建 `div` 并附加到 `document.body`
    -   `baseElement` - 可选 - 行为像 [RTL的电话 `baseElement`](https://testing-library.com/docs/react-testing-library/api#baseelement) 若为 `container` 指定,然后默认为此,否则此默认为 `document.body`
    -   `autoRender` -可选 - 此默认为 `true`。有时你可能会想 {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}在你们之间 `Backbone.View`是因为 `initialize` 财务报告和审定财务报表 `render` 方法,如果 这样你就可以通过 `false` 这里,打电话 `render` 手动返回 `view` 举个例子.
    -   `...options` - 任何其他财产将作为 `options` 页:1 `Backbone.View`建筑师 例如,您可以添加 `el` 如果您想要手动 提供给观点,而不是 `Backbone` 自动创建它。 你也可能会 经常想通过一个 `model`。 。 。 .

## `render` 结果

渲染方法返回具有几个属性的对象:

-   `...queries` - 渲染的最重要特征是: [`DOM Testing Library`](https://testing-library.com/docs/dom-testing-library/api-queries/) 将自动返回,并将第一个参数绑入 `baseElement`,哪个 默认为 `document.body`
-   `view` - 那个 `Backbone` 视图本身.
-   `container` - 行为就像 [RTL的电话 `container`](https://testing-library.com/docs/react-testing-library/api#container-1) 返回任意一个 `div` 自动为您创建, 或者 `container` 转至 `render`来得到 生成元素的根元素,使用 `container.firstChild` _或者说_ `view.el`。 。 。 .
-   `baseElement` - 行为就像 [RTL的电话 `baseElement`](https://testing-library.com/docs/react-testing-library/api#baseelement-1) 返回( n) `document.body` 或 `baseElement` 传到"投降".
-   `debug` - 行为就像 [RTL的电话 `debug`](https://testing-library.com/docs/react-testing-library/api#debug) 函数是一个快捷键 `console.log(prettyDOM(baseElement))`。 。 。 .
-   `unmount` - 打电话 `remove` 编辑 `Backbone.View` 实例和清理 `container` 键。 用于测试您从页面中删除视图时会发生什么 . 默认时间 `RTL_SKIP_AUTO_CLEANUP` 实值 `false`, (中文(简体) ), `cleanup` 在每一个 `afterEach` 运行的块 `render`,也就是说,如果 你不是在测试 `remove`虽然从另一个角度依赖 ENV var可能有点奇怪 图书馆,我们在这里的意图是 这个图书馆与RTL并列运行 相同用于移植组件.

## 许可证

麻省理工学院 [关闭](https://github.com/closeio)

## 常见问题

### @closeio/backbone-testing-library 是什么？

DOM 与 API 映射 React 测试库的测试工具

### 如何安装 @closeio/backbone-testing-library？

在项目目录运行 npm install @closeio/backbone-testing-library，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@testing-library/dom（\>=6\.1\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @closeio/backbone-testing-library 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/closeio\_\_backbone-testing-library 是否存在。

### @closeio/backbone-testing-library 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @closeio/backbone-testing-library 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=8。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @closeio/backbone-testing-library 可以商用吗？

@closeio/backbone-testing-library 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @closeio/backbone-testing-library 的下载量有多少？

根据 npm 官方下载统计，@closeio/backbone-testing-library 在 2026/10/10 – 2026/11/08 这 30 天内被下载 50,291 次，日均约 1,676 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @closeio/backbone-testing-library 还在维护吗？

最新版本 1\.0\.0 发布于 2020/12/22（5 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/12/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。