+
+
+
+我可以用这个库写单元测试吗？
+ +Definitely yes! You can write unit and integration tests with this library. See +below for more on how to mock dependencies (because this library intentionally +does NOT support shallow rendering) if you want to unit test a high level +component. The tests in this project show several examples of unit testing with +this library. + +As you write your tests, keep in mind: + +> The more your tests resemble the way your software is used, the more +> confidence they can give you. - [17 Feb 2018][guiding-principle] + +
+
+
+
++ 如果我不能使用浅层渲染，我如何在测试中模拟出组件？ +
+ +In general, you should avoid mocking out components (see +[the Guiding Principles section](guiding-principles.mdx)). However, if you need +to, then try to use [ng-mocks](https://ng-mocks.sudo.eu/) and its [`MockBuilder`](https://ng-mocks.sudo.eu/extra/with-3rd-party#testing-libraryangular-and-mockbuilder). + +```typescript +import {Component, NgModule} from '@angular/core' +import {render, screen} from '@testing-library/angular' +import {MockBuilder} from 'ng-mocks' + +@Component({ + selector: 'app-parent-component', + template: 'Child component
', +}) +class ChildComponent {} + +@NgModule({ + declarations: [ParentComponent, ChildComponent], +}) +export class AppModule {} + +describe('ParentComponent', () => { + it('should not render ChildComponent when shallow rendering', async () => { + // all imports, declarations and exports of AppModule will be mocked. + const dependencies = MockBuilder(ParentComponent, AppModule).build(); + + await render(ParentComponent, dependencies) + + expect(screen.queryByText('Child component')).toBeNull() + }) +}) +``` + +
+
+
+
+
+
+
+
+[guiding-principle]: https://twitter.com/kentcdodds/status/977018512689455106
+
+
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/angular-testing-library/intro.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/angular-testing-library/intro.mdx
new file mode 100644
index 000000000..a2c4fb050
--- /dev/null
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/angular-testing-library/intro.mdx
@@ -0,0 +1,45 @@
+---
+id: intro
+title: Angular Testing Library
+sidebar_label: 简介
+---
+
+[`Angular Testing Library`](https://github.com/testing-library/angular-testing-library)
+建立在
+[`DOM Testing Library`](https://github.com/testing-library/dom-testing-library)
+的基础上，增加了用于处理Angular组件的API。
+
+```bash npm2yarn
+npm install --save-dev @testing-library/angular
+```
+
+- [`@testing-library/angular-testing-library` on GitHub](https://github.com/testing-library/angular-testing-library)
+
+## 问题
+
+你想为你的 Angular 组件编写可维护的测试。作为这个目标的一部分，**你希望你的测试能避免包括组件的实现细节**。
+你应该把重点放在让你的测试给你带来信心上，这也是他们的目的。作为其中的一部分，你希望你的测试库从长远来看是可维护的，
+所以你的组件的重构（对实现的改变，但不是功能的改变）不会破坏你的测试，使你和你的团队慢下来。
+
+## 解决方案
+
+`Angular Testing Library` 是一个非常轻量级的解决方案，用于测试Angular组件。
+它在
+[`DOM Testing Library`](https://github.com/testing-library/dom-testing-library)
+的基础上提供轻量级的实用功能，以鼓励更好的测试实践。它的主要指导原则是:
+
+> [你的测试越像你的软件的使用方式，他们就越能给你信心](guiding-principles.mdx)
+
+因此，你的测试将与实际的DOM节点一起工作，而不是处理渲染的Angular组件实例。
+这个库所提供的工具便于用户以同样的方式查询DOM。通过标签文本找到表单元素（就像用户一样），
+通过文本找到链接和按钮（就像用户一样）。它还提供了一种推荐的方法，即通过 `data-testid` 来寻找元素，
+作为元素的 "逃生舱门"，在这种情况下，文本内容和标签没有意义或不实用。
+
+这个库鼓励你的应用程序更容易访问，并允许你让你的测试更接近于以用户的方式使用你的组件，
+这使得你的测试给你更多的信心，当真正的用户使用它时，你的应用程序会工作。
+
+`Angular Testing Library`:
+
+- 重新导出 [`DOM Testing Library`](https://github.com/testing-library/dom-testing-library) 中的 `query` 和 `fireEvent` 实用函数。
+- 封装你的组件的 `fireEvent` 函数，在事件发生后自动调用 `detectChanges()`
+- 与测试框架无关，它可以在每个测试框架上运行。
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/bs-react-testing-library/examples.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/bs-react-testing-library/examples.mdx
new file mode 100644
index 000000000..17e2ec16e
--- /dev/null
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/bs-react-testing-library/examples.mdx
@@ -0,0 +1,133 @@
+---
+id: examples
+title: 示例
+---
+
+你可以在
+[wyze/bs-dom-testing-library/src/\_\_tests\_\_](https://github.com/wyze/bs-dom-testing-library/tree/master/src/__tests__)
+找到更多bs-dom-testing-library的例子。
+
+你可以在
+[wyze/bs-react-testing-library/src/\_\_tests\_\_](https://github.com/wyze/bs-react-testing-library/tree/master/src/__tests__)
+找到更多bs-react-testing-library的例子。
+
+## React Testing Library
+
+```reason title="Component_test.re"
+open Jest;
+open Expect;
+open ReactTestingLibrary;
+
+test("Component renders", () =>
+ + 我应该测试组件树的哪一层？子组件，父组件，还是两者？ +
+ +Following the guiding principle of this library, it is useful to break down how +tests are organized around how the user experiences and interacts with +application functionality rather than around specific components themselves. In +some cases, for example for reusable component libraries, it might be useful to +include developers in the list of users to test for and test each of the +reusable components individually. Other times, the specific break down of a +component tree is just an implementation detail and testing every component +within that tree individually can cause issues (see +https://kentcdodds.com/blog/avoid-the-test-user). + +In practice this means that it is often preferable to test high enough up the +component tree to simulate realistic user interactions. The question of whether +it is worth additionally testing at a higher or lower level on top of this comes +down to a question of tradeoffs and what will provide enough value for the cost +(see https://kentcdodds.com/blog/unit-vs-integration-vs-e2e-tests on more info +on different levels of testing). + +For a more in-depth discussion of this topic see +[this video](https://youtu.be/0qmPdcV-rN8). + +
+
+ |> render
+ |> container
+ |> expect
+ |> toMatchSnapshot
+);
+```
+
+## DOM Testing Library
+
+下面的例子使用
+[`bs-webapi`](https://github.com/reasonml-community/bs-webapi-incubator)
+来帮助打字和创建事件。
+
+### getByText
+
+```reason title="__tests__/example_test.re"
+open Jest;
+open DomTestingLibrary;
+open Expect;
+
+type parser;
+
+[@bs.new]
+external domParser : unit => parser = "DOMParser";
+
+[@bs.send.pipe : parser]
+external parseFromString : ( string, [@bs.as "text/html"] _) => Dom.element = "";
+
+[@bs.get]
+external body : Dom.element => Dom.element = "";
+
+[@bs.get]
+external firstChild : Dom.element => Dom.element = "";
+
+let div = domParser()
+ |> parseFromString({j|
+ {ReasonReact.string("Heading")}
+
+ Hello,
+ ![Alt text]()
+
+ |j})
+ |> body
+ |> firstChild;
+
+describe("getByText", () => {
+ test("works with string matcher", () => {
+ let actual = div |> getByText(~matcher=`Str("Hello,"));
+
+ expect(actual) |> toMatchSnapshot;
+ });
+
+ test("works with regex matcher", () => {
+ let actual = div |> getByText(~matcher=`RegExp([%bs.re "/\\w!/"]));
+
+ expect(actual) |> toMatchSnapshot;
+ });
+
+ test("works with function matcher", () => {
+ let matcher = ( _text, node ) => (node |> tagName) === "P";
+ let actual = div |> getByText(~matcher=`Func(matcher));
+
+ expect(actual) |> toMatchSnapshot;
+ });
+});
+```
+
+## FireEvent
+
+```reason
+open Jest;
+open DomTestingLibrary;
+open Expect;
+
+describe("FireEvent", () => {
+ test("click works", () => {
+ open Webapi.Dom;
+
+ let node = document |> Document.createElement("button");
+ let spy = JestJs.inferred_fn();
+ let fn = spy |> MockJs.fn;
+ let clickHandler = _ => [@bs] fn("clicked!") |> ignore;
+
+ node |> Element.addEventListener("click", clickHandler);
+
+ FireEvent.click(node);
+
+ expect(spy |> MockJs.calls) |> toEqual([|"clicked!"|]);
+ });
+
+ test("change works", () => {
+ open Webapi.Dom;
+
+ let node = document |> Document.createElement("input");
+ let spy = JestJs.inferred_fn();
+ let fn = spy |> MockJs.fn;
+ let changeHandler = _ => [@bs] fn("changed!") |> ignore;
+ let event = Event.makeWithOptions("change", { "target": { "value": "1" } });
+
+ node |> Element.addEventListener("change", changeHandler);
+
+ FireEvent.change(node, event);
+
+ expect(spy |> MockJs.calls) |> toEqual([|"changed!"|]);
+ });
+});
+```
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/bs-react-testing-library/intro.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/bs-react-testing-library/intro.mdx
new file mode 100644
index 000000000..0fbf613ba
--- /dev/null
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/bs-react-testing-library/intro.mdx
@@ -0,0 +1,72 @@
+---
+id: intro
+title: Reason Testing Library
+sidebar_label: 简介
+---
+
+几个 testing-library 的绑定已经被移植到 [ReasonML][re]。
+
+[`bs-react-testing-library`][gh-react] 包含 `React Testing Library` 的 [BuckleScript](https://bucklescript.github.io/) 绑定。
+
+[`bs-dom-testing-library`][gh-dom] 包含 `DOM Testing Library` 的 [BuckleScript] 绑定。
+
+```bash npm2yarn
+npm install --save-dev bs-dom-testing-library
+npm install --save-dev bs-react-testing-library
+```
+
+- [bs-react-testing-library on GitHub][gh-react]
+- [bs-dom-testing-library on GitHub][gh-dom]
+
+[gh-dom]: https://github.com/wyze/bs-dom-testing-library
+[gh-react]: https://github.com/wyze/bs-react-testing-library
+
+## 设置
+
+安装后，你需要让你的包 bsconfig.json 文件如下配置：
+
+```json
+{
+ "bs-dev-dependencies": ["bs-react-testing-library"]
+}
+```
+
+_or_
+
+```json
+{
+ "bs-dev-dependencies": ["bs-dom-testing-library"]
+}
+```
+
+## 其它依赖
+
+### bs-platform
+
+这就是 [BuckleScript][bs] 用来将 [Reason][re] 代码编译成JS的工具。
+如果你的项目中没有它，你可以像这样安装它：
+
+```bash npm2yarn
+npm install --save-dev bs-platform
+```
+
+### bs-jest
+
+这是推荐的测试运行器，是一个围绕Jest的封装器。这里所有的例子都将使用它。
+
+- [bs-jest on GitHub](https://github.com/glennsl/bs-jest)
+
+```bash npm2yarn
+npm install --save-dev @glennsl/bs-jest
+```
+
+然后，更新 `bsconfig.json`:
+
+```json
+{
+ "bs-dev-dependencies": ["@glennsl/bs-jest"]
+}
+```
+
+[bs]: https://bucklescript.github.io/
+[re]: https://reasonml.github.io/
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/contributing.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/contributing.mdx
new file mode 100644
index 000000000..8e51701fe
--- /dev/null
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/contributing.mdx
@@ -0,0 +1,49 @@
+---
+id: contributing
+title: 贡献
+sidebar_label: 贡献
+---
+
+## License
+
+`React Testing Library` is distributed under the open-source MIT license
+
+## Issues
+
+_Looking to contribute? Look for the [Good First Issue][good-first-issue]
+label._
+
+### 🐛 Bugs
+
+Please file an issue for bugs, missing documentation, or unexpected behavior.
+
+[**See Bugs**][bugs]
+
+### 💡 Feature Requests
+
+Please file an issue to suggest new features. Vote on feature requests by adding
+a 👍. This helps maintainers prioritize what to work on.
+
+[**See Feature Requests**][requests]
+
+### ❓ Questions
+
+For questions related to using the library, please visit a support community
+instead of filing an issue on GitHub.
+
+- [Discord][discord]
+- [Stack Overflow][stackoverflow]
+
+
+
+
+
+[bugs]: https://github.com/testing-library/react-testing-library/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Acreated-desc
+[requests]: https://github.com/testing-library/react-testing-library/issues?q=is%3Aissue+sort%3Areactions-%2B1-desc+label%3Aenhancement+is%3Aopen
+[good-first-issue]: https://github.com/testing-library/react-testing-library/issues?utf8=✓&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3A"good+first+issue"+
+[discord]: https://discord.gg/testing-library
+[stackoverflow]: https://stackoverflow.com/questions/tagged/react-testing-library
+
+
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/cypress-testing-library/intro.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/cypress-testing-library/intro.mdx
new file mode 100644
index 000000000..49536c57d
--- /dev/null
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/cypress-testing-library/intro.mdx
@@ -0,0 +1,69 @@
+---
+id: intro
+title: Cypress Testing Library
+---
+
+[`Cypress Testing Library`][gh]允许在[Cypress](https://cypress.io)端到端浏览器测试中使用dom-testing查询。
+
+```bash npm2yarn
+npm install --save-dev cypress @testing-library/cypress
+```
+
+- [Cypress Testing Library on GitHub][gh]
+
+## 使用
+
+`Cypress Testing Library` 扩展了Cypress的 `cy` 命令。
+
+在你项目的 `cypress/support/commands.js` 中添加这一行:
+
+```js
+import '@testing-library/cypress/add-commands'
+```
+
+你现在可以使用 `DOM Testing Library`' 的所有`findBy`, `findAllBy`, `queryBy`和`queryAllBy`命令，
+离开全局 `cy` 对象。请参阅[关于查询]((/docs/queries/about))的文档以获得参考。
+
+> 注意：不支持 `get*` 查询，因为对于合理的Cypress测试，你需要重试，而 `find*` 查询已经支持了。
+> `query*` 查询从v5开始就不再支持了，将在v6删除。`find*` 完全支持内置的Cypress断言（删除了`query*`的唯一用例）。
+
+## 使用 TypeScript
+
+应在 `tsconfig.json` 中添加以下类型:
+
+```json
+{
+ "compilerOptions": {
+ "types": ["cypress", "@testing-library/cypress"]
+ }
+}
+```
+
+你可以在这里找到所有的
+[库定义](https://github.com/testing-library/cypress-testing-library/blob/master/types/index.d.ts)。
+
+## 示例
+
+为了展示一些简单的例子（来自[cypress/integration/find.spec.js](https://github.com/testing-library/cypress-testing-library/blob/97939da7d4707a71049884c0324c0eda56e26fc2/cypress/integration/find.spec.js)):
+）。
+
+```javascript
+cy.findByRole('button', {name: /Jackie Chan/i}).click()
+cy.findByRole('button', {name: /Button Text/i}).should('exist')
+cy.findByRole('button', {name: /Non-existing Button Text/i}).should('not.exist')
+cy.findByLabelText(/Label text/i, {timeout: 7000}).should('exist')
+
+// findByRole _inside_ a form element
+cy.get('form')
+ .findByRole('button', {name: /Button Text/i})
+ .should('exist')
+cy.findByRole('dialog').within(() => {
+ cy.findByRole('button', {name: /confirm/i})
+})
+```
+
+`Cypress Testing Library` 同时支持jQuery元素和DOM节点。这是必要的，因为Cypress使用jQuery元素，
+而 `Cypress Testing Library` 期望DOM节点。当你传递一个jQuery元素作为容器时，它将从集合中获得第一个DOM节点，
+并将其作为 `DOM Testing Library` 函数的 `container` 参数。
+
+[gh]: https://github.com/testing-library/cypress-testing-library
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/api-accessibility.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/api-accessibility.mdx
new file mode 100644
index 000000000..5dd421db2
--- /dev/null
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/api-accessibility.mdx
@@ -0,0 +1,82 @@
+---
+id: api-accessibility
+title: 无障碍访问
+---
+
+## 无障碍测试
+
+Testing Library API 的指导原则之一是，它们应使你能够以用户使用的方式来测试你的应用程序，包括通过屏幕阅读器等无障碍界面。
+
+关于如何使用语义HTML查询来确保你的应用程序与浏览器的可访问性API一起工作的细节，
+请参见[查询](queries/about.mdx#priority)页面。
+
+## `getRoles`
+
+这个函数允许在一个给定的DOM节点树中，遍历其上的隐式 ARIA 角色。
+
+它返回一个对象，以角色名称为键，每个值是一个具有该隐式ARIA角色的元素数组。
+
+关于隐式的ARIA角色的更多信息，请参见[HTML中的ARIA](https://www.w3.org/TR/html-aria/#document-conformance-requirements-for-use-of-aria-attributes-in-html)。
+
+```javascript
+import {getRoles} from '@testing-library/dom'
+
+const nav = document.createElement('nav')
+nav.innerHTML = `
+World!
+ + +-
+
- Item 1 +
- Item 2 +
-
+
- Item 1 +
- Item 2 +
+// Hello
+// World !
+//
+const text = getNodeText(container.querySelector('div')) // "Hello World !"
+```
+
+当通过文本内容查询节点时，这个函数也被内部使用，这使得像 `getByText` 和 `queryByText` 这样的函数能够像预期的那样工作，
+类似于用户在DOM中寻找元素。
+
+该函数对某些输入元素有一个特殊的行为:
+
+```javascript
+//
+//
+const submitText = getNodeText(container.querySelector('input[type=submit]')) // "Send data"
+const buttonText = getNodeText(container.querySelector('input[type=button]')) // "Push me"
+
+这些元素使用属性 `value` 并向用户显示其值。
+```
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/api-debugging.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/api-debugging.mdx
new file mode 100644
index 000000000..14825d21a
--- /dev/null
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/api-debugging.mdx
@@ -0,0 +1,123 @@
+---
+id: api-debugging
+title: 调试
+---
+
+## 自动日志记录
+
+当你的测试用例中使用 `get` 或 `find` 方法调用失败时，
+`container` (DOM) 的当前状态会在控制台中打印出来。例如：
+
+```javascript
+// Hello world
+getByText(container, 'Goodbye world') // 没有匹配将抛出错误
+```
+
+上面的测试用例会失败，但是它会打印出你正在测试的 DOM 的状态，所以你会看到：
+
+```
+Unable to find an element with the text: Goodbye world. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
+Here is the state of your container:
+
+
+```
+
+**注意**: 由于DOM的大小会变得非常大，你可以通过环境变量 `DEBUG_PRINT_LIMIT` 来设置打印的DOM内容的限制。
+默认值是7000。你会在控制台中看到 `...`，当DOM内容被缩略时，由于你所设置的长度或由于默认的大小限制。
+下面是你在运行测试时增加这个限制的方法（由于 DOM 可能会很大）:
+
+```
+DEBUG_PRINT_LIMIT=10000 npm test
+```
+
+此方式设置仅适用于 macOS/Linux平台，如果是 windows 你还需要执行其它操作。
+如果你想要一个两全其美的方案，请参考
+[`cross-env`](https://www.npmjs.com/package/cross-env).
+
+**Note**: 在 node环境下，DOM 的输出默认会被彩色化处理。如果你想关闭彩色化处理（例如将输出写入到日志文件中），
+你可以通过设置环境变量 `COLORS` 显式关闭和打开， 举例：
+
+```
+COLORS=false npm test
+```
+
+此方式设置仅适用于 macOS/Linux平台，如果是 windows 你还需要执行其它操作。
+如果你想要一个两全其美的方案，请参考
+[`cross-env`](https://www.npmjs.com/package/cross-env).
+
+## `prettyDOM`
+
+建立在[`pretty-format`](https://github.com/facebook/jest/tree/master/packages/pretty-format)之上，
+这个辅助函数可以用来打印出一个美观一点的节点的DOM树结构。例如，在调试测试时，这可能很有帮助。
+
+函数定义如下:
+
+```typescript
+interface Options extends prettyFormat.OptionsReceived {
+ filterNode?: (node: Node) => boolean
+}
+
+function prettyDOM(
+ node: HTMLElement,
+ maxLength?: number,
+ options?: Options,
+): string
+```
+
+它接收要打印出来的根节点，还有一个可选的额外参数，用于限制所产生的字符串的大小，
+以应对它变得太大的情况。它有一个最后的参数，允许你配置你的格式化。除了列出的选项外，你还可以传递 `pretty-format` 的
+[选项](https://github.com/facebook/jest/tree/master/packages/pretty-format#usage-with-options)。
+
+默认情况下，``，``和注释节点被忽略。
+你可以通过传递一个自定义的 `filterNode `函数来配置这种行为，该函数应该对你希望包含在输出中的每个节点返回true。
+
+这个函数通常与console.log一起使用，在测试过程中临时打印出DOM树，用于调试:
+
+```javascript
+import {prettyDOM} from '@testing-library/dom'
+
+const div = document.createElement('div')
+div.innerHTML = '
+ Hello world
+
+Hello World
+//
+```
+
+这个功能也是 [上述自动调试输出](#debugging) 的底层支持。
+
+## `logRoles`
+
+这个辅助函数可以用来打印出一个DOM节点树中所有隐式的ARIA角色的列表，
+每个角色都包含一个符合该角色的所有节点的列表。这对于找到使用[getByRole](queries/byrole.mdx)查询被测试的DOM的方法很有帮助。
+
+```javascript
+import {logRoles} from '@testing-library/dom'
+
+const nav = document.createElement('nav')
+nav.innerHTML = `
+Hello World
+//-
+
- Item 1 +
- Item 2 +
Hello World
+```
+
+**可以找到 div:**
+
+```javascript
+// Matching a string:
+getByText(container, 'Hello World') // full string match
+getByText(container, 'llo Worl', {exact: false}) // substring match
+getByText(container, 'hello world', {exact: false}) // ignore case
+
+// Matching a regex:
+getByText(container, /World/) // substring match
+getByText(container, /world/i) // substring match, ignore case
+getByText(container, /^hello world$/i) // full string match, ignore case
+getByText(container, /Hello W?oRlD/i) // advanced regex
+
+// Matching with a custom function:
+getByText(container, (content, element) => content.startsWith('Hello'))
+```
+
+给定一个按钮，点击后在一段时间后更新页面:
+
+```jsx
+test('loads items eventually', async () => {
+ // Click button
+ fireEvent.click(getByText(node, 'Load'))
+
+ // Wait for page to update with query text
+ const items = await findAllByText(node, /Item #[0-9]: /)
+ expect(items).toHaveLength(10)
+})
+```
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/example-intro.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/example-intro.mdx
new file mode 100644
index 000000000..538375512
--- /dev/null
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/example-intro.mdx
@@ -0,0 +1,71 @@
+---
+id: example-intro
+title: 示例
+sidebar_label: 示例
+---
+
+```js title="src/__tests__/example.js"
+// 查询 工具函数:
+import {
+ getByLabelText,
+ getByText,
+ getByTestId,
+ queryByTestId,
+ // Tip: all queries are also exposed on an object
+ // called "queries" which you could import here as well
+ waitFor,
+} from '@testing-library/dom'
+// 增加特殊的断言，如 toHaveTextContent
+import '@testing-library/jest-dom'
+
+function getExampleDOM() {
+ // This is just a raw example of setting up some DOM
+ // that we can interact with. Swap this with your UI
+ // framework of choice 😉
+ const div = document.createElement('div')
+ div.innerHTML = `
+
+
+
+ `
+ const button = div.querySelector('button')
+ const input = div.querySelector('input')
+ button.addEventListener('click', () => {
+ // let's pretend this is making a server request, so it's async
+ // (you'd want to mock this imaginary request in your unit tests)...
+ setTimeout(() => {
+ const printedUsernameContainer = document.createElement('div')
+ printedUsernameContainer.innerHTML = `
+ ${input.value}
+ `
+ div.appendChild(printedUsernameContainer)
+ }, Math.floor(Math.random() * 200))
+ })
+ return div
+}
+
+test('examples of some things', async () => {
+ const famousProgrammerInHistory = 'Ada Lovelace'
+ const container = getExampleDOM()
+
+ // Get form elements by their label text.
+ // An error will be thrown if one cannot be found (accessibility FTW!)
+ const input = getByLabelText(container, 'Username')
+ input.value = famousProgrammerInHistory
+
+ // Get elements by their text, just like a real user does.
+ getByText(container, 'Print Username').click()
+
+ await waitFor(() =>
+ expect(queryByTestId(container, 'printed-username')).toBeTruthy(),
+ )
+
+ // getByTestId and queryByTestId are an escape hatch to get elements
+ // by a test id (could also attempt to get this element by its text)
+ expect(getByTestId(container, 'printed-username')).toHaveTextContent(
+ famousProgrammerInHistory,
+ )
+ // jest snapshots work great with regular DOM nodes!
+ expect(container).toMatchSnapshot()
+})
+```
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/faq.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/faq.mdx
new file mode 100644
index 000000000..58db291a4
--- /dev/null
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/faq.mdx
@@ -0,0 +1,121 @@
+---
+id: faq
+title: 常见问题
+---
+
+
+
+
+
+我应该使用哪个 get 方法？
+ +参考 [我该使用哪个查询](queries/about.mdx#优先级) + +
+
+
+
+我能用这个库来编写单元测试吗？
+ +绝对可以！你可以使用该库编写单元、集成和端到端测试。 + +在编写测试时，请牢记： + +> 测试代码与你的软件使用方式越相似，它们能给你的信心就越大 - [2018年2月17][guiding-principle] + +
+
+
+
++ 如果应用或页面使用了国际化，无法在测试中获取到对应的文本，该怎么办？ +
+ +This is fairly common. Our first bit of advice is to try to get the default text +used in your tests. That will make everything much easier (more than just using +this utility). If that's not possible, then you're probably best to just stick +with `data-testid`s (which is not bad anyway). + +
+
+
+
++ 真心不喜欢使用 data-testids，但是其它的查询方式又感觉不合适， + 一定要使用 data-testid 吗? +
+ +Definitely not. That said, a common reason people don't like the `data-testid` +attribute is they're concerned about shipping that to production. I'd suggest +that you probably want some simple E2E tests that run in production on occasion +to make certain that things are working smoothly. In that case the `data-testid` +attributes will be very useful. Even if you don't run these in production, you +may want to run some E2E tests that run on the same code you're about to ship to +production. In that case, the `data-testid` attributes will be valuable there as +well. + +All that said, if you really don't want to ship `data-testid` attributes, then +you can use +[this simple babel plugin](https://www.npmjs.com/package/babel-plugin-react-remove-properties) +to remove them. + +If you don't want to use them at all, then you can simply use regular DOM +methods and properties to query elements off your container. + +```javascript +const firstLiInDiv = container.querySelector('div li') +const allLisInDiv = container.querySelectorAll('div li') +const rootElement = container.firstChild +``` + +
+
+
+
++ 如果在一个列表中为每一项都添加了 data-testid="item" 属性，怎么样区分它们？ +
+ +You can make your selector just choose the one you want by including :nth-child +in the selector. + +```javascript +const thirdLiInUl = container.querySelector('ul > li:nth-child(3)') +``` + +Or you could use `getAllByRole` to query the `listitem` role and access the +index in question: + +```javascript +const items = [ + /* your items */ +] +const {container} = render(/* however you render this stuff */) +const thirdItem = getAllByRole(container, 'listitem')[2] +``` + +
+
+
+
+
+
+
+[guiding-principle]: https://twitter.com/kentcdodds/status/977018512689455106
+
+
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/install.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/install.mdx
new file mode 100644
index 000000000..ef3fbcc8b
--- /dev/null
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/install.mdx
@@ -0,0 +1,60 @@
+---
+id: install
+title: 安装
+sidebar_label: 安装
+---
+
+```bash npm2yarn
+npm install --save-dev @testing-library/dom
+```
+
+## 封装器
+
+如果你在使用像 React 这样的框架或库时，你应该安装对应的封装器：
+
+- [React Testing Library](react-testing-library/intro.mdx)
+- [Reason Testing Library](bs-react-testing-library/intro.mdx)
+- [React Native Testing Library](react-native-testing-library/intro.mdx)
+- [Vue Testing Library](vue-testing-library/intro.mdx)
+- [Marko Testing Library](marko-testing-library/intro.mdx)
+- [Angular Testing Library](angular-testing-library/intro.mdx)
+- [Preact Testing Library](preact-testing-library/intro.mdx)
+- [Svelte Testing Library](svelte-testing-library/intro.mdx)
+- [Cypress Testing Library](cypress-testing-library/intro.mdx)
+- [Puppeteer Testing Library](pptr-testing-library/intro.mdx)
+- [Testcafe Testing Library](testcafe-testing-library/intro.mdx)
+- [Nightwatch Testing Library](nightwatch-testing-library/intro.mdx)
+
+## 生态
+
+`DOM Testing Library` 和下面这些配套库一起运行:
+
+- [user-event](user-event/intro.mdx) 模拟浏览器事件
+- [jest-dom](ecosystem-jest-dom.mdx) 自定义的 Jest 匹配器
+- [bs-jest-dom](ecosystem-bs-jest-dom.mdx) `bs-react-testing-library` 的配套库
+- [jest-native](ecosystem-jest-native.mdx) `React Native Testing Library` 的配套库
+- [react-select-event](ecosystem-react-select-event.mdx) `React Testing Library` 的配套库
+- [eslint-plugin-testing-library](ecosystem-eslint-plugin-testing-library.mdx)
+ Testing Library 的 ESLint 插件
+- [eslint-plugin-jest-dom](ecosystem-eslint-plugin-jest-dom.mdx) Jest DOM 的 ESLint 插件
+- [riot-testing-library](ecosystem-riot-testing-library.mdx) 支持 Riot.js 组件
+
+## Main Exports
+
+你可以查看
+[`DOM Testing Library` 的 package.json](https://unpkg.com/@testing-library/dom/package.json).
+
+特别是，`main`、`module`和`umd:main`字段很有用。每个字段都指向一个在某些情况下有用的文件。
+通常情况下，你的测试框架会根据你的情况解析到正确的文件，但如果它没有，那么你可以配置你的测试框架，
+在你 require/import `@testing-library/dom` 时解析到正确的文件，或者你可以更明确地导入你需要的文件。举例：
+
+```js
+import {within} from '@testing-library/dom/dist/@testing-library/dom.umd.js'
+```
+
+你可以在
+[这里](https://unpkg.com/@testing-library/dom/dist/)
+查看已发布的dist文件。
+
+`main` 文件被配置为支持 `package.json` `engines.node`字段中引用的node的版本。
+但 `module` 和 `umd:main` 文件被配置为支持IE10(旧的浏览器)。
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/intro.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/intro.mdx
new file mode 100644
index 000000000..4f9e22dfb
--- /dev/null
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/intro.mdx
@@ -0,0 +1,34 @@
+---
+id: intro
+title: 简介
+---
+
+## 问题
+
+想要编写可维护的测试代码，希望它们可以增加你对组件正常工作的信心。为了实现此目标， 您希望你的测试避免包含实现细节，
+以便组件的重构（对实现的更改但不是功能的更改）时不会破坏原有的测试，进而减慢团队的开发速度。
+
+## 解决方案
+
+`DOM Testing Library` 是一个轻量级的解决方案，用于测试 DOM 节点
+（由 [`JSDOM`](https://github.com/jsdom/jsdom)/[Jest][jest]模拟或真正的浏览器）。
+它提供的查询DOM节点工具和真正用户在页面查找元素时相似的，从而提升你对 UI 代码的信心。
+`DOM Testing Library` 的第一指导原则是：
+
+> [测试代码与你的软件使用方式越相似，它们能给你的信心就越大](guiding-principles.mdx)
+
+作为该目标的一部分，该库提供的工具函数有助于实现以用户的方式来查询 DOM。
+通过标签文本来查找表单上的元素 (就像用户那样)，通过文本找到对应链接和按钮 (就像用户那样) 等等。
+当文本内容和标签不适用的情况下，它推荐使用 `data-testid` 作为 “逃生舱” 来查找元素。
+
+该库鼓励你的应用应该易于访问（无障碍访问），并让你的测试更接近你的组件被用户使用，
+从而让你对组件在用户手中正常工作更加有信心。
+
+**Testing Library 不是什么**:
+
+1. 测试执行器 或 框架
+2. 特定的测试框架 (尽管我们推荐 Jest 作为首选项,
+ 但是该库适用于其它框架. 参考
+ [不使用 Jest](setup.mdx#using-without-jest))
+
+[jest]: https://jestjs.io
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/setup.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/setup.mdx
new file mode 100644
index 000000000..3e652d4d4
--- /dev/null
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/setup.mdx
@@ -0,0 +1,31 @@
+---
+id: setup
+title: 设置
+sidebar_label: 设置
+---
+
+如果你的测试代码是使用 webpack（或类似的） 打包运行在浏览器中，则 `DOM Testing Library` 是开箱即用的。
+但是，大多数人都是结合
+[Jest 测试框架](https://jestjs.io/) 一起使用，同时设置 Jest 的 `testEnvironment` 为
+[`jest-environment-jsdom`](https://www.npmjs.com/package/jest-environment-jsdom)
+
+## 不使用 Jest
+
+[jsdom](https://github.com/jsdom/jsdom) 是使用纯 Javascript 对 DOM 和浏览器 API 在 node 上的实现。
+如果你没有使用 Jest，且想要在 node 环境中测试，你需要自己安装 jsdom。
+同时还有一个名为
+[global-jsdom](https://github.com/modosc/global-jsdom) 的库帮助你设置全局的环境来模拟浏览器 API。
+注意，如果你在使用 Vitest，则你不需要安装 global-jsdom，你只需配置 [`environment`](https://vitest.dev/config/#environment)
+为 `jsdom` 即可。
+
+首先安装 jsdom 和 global-jsdom。
+
+```bash npm2yarn
+npm install --save-dev jsdom global-jsdom
+```
+
+使用 mocha 的情况下，测试命令应该如下：
+
+```
+mocha --require global-jsdom/register
+```
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/ecosystem-bs-jest-dom.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/ecosystem-bs-jest-dom.mdx
new file mode 100644
index 000000000..5510b63fd
--- /dev/null
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/ecosystem-bs-jest-dom.mdx
@@ -0,0 +1,58 @@
+---
+id: ecosystem-bs-jest-dom
+title: bs-jest-dom
+---
+
+[`bs-jest-dom`][gh] 是 [`bs-react-testing-library`](bs-react-testing-library/intro.mdx) 的配套库，
+通过 [BuckleScript][bucklescript] 为 [ReasonML][re] 中的Jest提供自定义DOM元素匹配器。
+
+```bash npm2yarn
+npm install --save-dev bs-jest-dom
+```
+
+- [bs-jest-dom on GitHub][gh]
+
+请查阅[jest-dom的文档](https://github.com/testing-library/jest-dom)，了解可用匹配器的完整列表。
+
+[gh]: https://github.com/wyze/bs-jest-dom
+
+## 设置
+
+```json
+{
+ "bs-dev-dependencies": ["bs-jest-dom"]
+}
+```
+
+## 示例
+
+```reason title="A_test.re"
+open Jest;
+open JestDom;
+open ReactTestingLibrary;
+
+module Heading = {
+ let component = ReasonReact.statelessComponent("Heading");
+
+ let make = (~text, _children) => {
+ ...component,
+ render: _self =>
+ + 求救! 无法访问组件的方法或组件实例! +
+ +This is **intentional**. + +We want you to focus on testing the output and functionality of the component as +it is observed by the user and to **avoid worrying about the implementation +details** of the component. + +We believe this leads to less brittle and more meaningful test code. + +Please refer to the [Guiding Principles](guiding-principles.mdx) of this testing +library for more info. + +{ReasonReact.string(text)}
, + }; +}; + +test("renders with text", () => +Visible Example
+
+expect(screen.queryByTestId('not-empty')).not.toBeEmptyDOMElement()
+expect(screen.getByText('Visible Example')).toBeVisible()
+```
+
+> 注意：当使用其中一些匹配器时，你可能需要确保你使用查询函数（如`queryByTestId`）而不是获取函数（如`getByTestId`）。
+> 否则，`get*` 函数可能会在你的断言之前抛出一个错误。
+
+请查阅[jasmine-dom的文档][gh]，了解可用匹配器的完整列表。
+
+- [jasmine-dom on GitHub][gh]
+
+[gh]: https://github.com/testing-library/jasmine-dom
+[gh-usage]: https://github.com/testing-library/jasmine-dom#usage
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/ecosystem-jest-dom.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/ecosystem-jest-dom.mdx
new file mode 100644
index 000000000..84683958f
--- /dev/null
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/ecosystem-jest-dom.mdx
@@ -0,0 +1,38 @@
+---
+id: ecosystem-jest-dom
+title: jest-dom
+---
+
+jest-dom是测试库的一个配套库，为Jest提供自定义的DOM元素匹配器。
+
+[`jest-dom`][gh] 是 Testing Library 的一个配套库，为Jest提供自定义的DOM元素匹配器。
+
+```bash npm2yarn
+npm install --save-dev @testing-library/jest-dom
+```
+
+然后按照jest-dom文档中的[用法部分][gh-usage]，将匹配器添加到Jest中。
+
+```jsx
+import {screen} from '@testing-library/dom'
+
+test('uses jest-dom', () => {
+ document.body.innerHTML = `
+
+ Visible Example
+ `
+
+ expect(screen.queryByTestId('not-empty')).not.toBeEmptyDOMElement()
+ expect(screen.getByText('Visible Example')).toBeVisible()
+})
+```
+
+> 注意：当使用其中一些匹配器时，你可能需要确保你使用查询函数（如`queryByTestId`）而不是
+> 获取函数（如`getByTestId`）。否则，`get*` 函数可能会在你的断言之前抛出一个错误。
+
+请查阅[jest-dom的文档][gh]，了解可用匹配器的完整列表。
+
+- [jest-dom on GitHub][gh]
+
+[gh]: https://github.com/testing-library/jest-dom
+[gh-usage]: https://github.com/testing-library/jest-dom#usage
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/ecosystem-jest-native.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/ecosystem-jest-native.mdx
new file mode 100644
index 000000000..3bd3e5fb9
--- /dev/null
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/ecosystem-jest-native.mdx
@@ -0,0 +1,32 @@
+---
+id: ecosystem-jest-native
+title: jest-native
+sidebar_label: jest-native
+---
+
+[`Jest Native`](https://github.com/testing-library/jest-native) 是 `React Native Testing Library` 的配套库，为Jest提供自定义元素匹配器。
+
+```bash npm2yarn
+npm install --save-dev @testing-library/jest-native
+```
+
+```jsx
+const {queryByTestId} = render(
+
+
+
+
,
+ )
+
+ userEvent.click(screen.getByText('Check'))
+ expect(screen.getByLabelText('Check')).toBeChecked()
+})
+```
+
+你也可以 ctrl + 点击 / shift + 点击：
+
+```js
+userEvent.click(elem, {ctrlKey: true, shiftKey: true})
+```
+
+更多选项请参见 [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent) 构造函数文档。
+
+注意，在 `click` 之前会触发 hover 事件。要禁用这一点，请将 `skipHover` 选项设置为 `true`。
+
+#### 指针事件选项
+
+在 `pointer-events` 被设置为 "none"（即不可点击）的情况下，试图点击一个元素将产生一个错误。
+如果你想禁用这种行为，你可以把 `skipPointerEventsCheck` 设置为 `true`。
+
+```js
+userEvent.click(elem, undefined, {skipPointerEventsCheck: true})
+```
+
+`skipPointerEventsCheck` 选项可以被传递给任何与指针相关的API，包括:
+
+- [dblClick](#dblclickelement-eventinit-options)
+- [hover](#hoverelement-options)
+- [unhover](#unhoverelement-options)
+- [selectOptions](#selectoptionselement-values-options)
+- [deselectOptions](#deselectoptionselement-values-options)
+
+### `dblClick(element, eventInit, options)`
+
+点击 `element` 两次，取决于是什么 `element`，可能会有不同的副作用。
+
+```jsx
+import React from 'react'
+import {render, screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+test('double click', () => {
+ const onChange = jest.fn()
+ render()
+ const checkbox = screen.getByRole('checkbox')
+ userEvent.dblClick(checkbox)
+ expect(onChange).toHaveBeenCalledTimes(2)
+ expect(checkbox).not.toBeChecked()
+})
+```
+
+注：`options` 包括[指针事件选项](#pointer-events-options)
+
+### `type(element, text, [options])`
+
+在 `` 或 `
+
+```
+
+```js
+const inputNode = screen.getByLabelText('Username', {selector: 'input'})
+```
+
+> **注意**
+>
+> `