utquidem/website/docs/guides/tutorials/c11-container/11.4-testing.md

The meta-framework suite designed from scratch for frontend-focused modern web development.

---
title: ​测试容器组件
---

跟[测试组件​​​](../c06-css-and-component/6.6-testing)中一样，不需要做任何配置，可以直接给Model 写测试用例。

以 `containers/Contacts.tsx` 为例，我们创建对应的 `.test` 文件：

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
<TabItem value="macOS" label="macOS" default>

```bash
touch src/contacts/containers/contacts.test.tsx
```

</TabItem>
<TabItem value="Windows" label="Windows">

```powershell
ni src/contacts/containers/contacts.test.tsx
```

</TabItem>
</Tabs>

在测试用例中可以使用 Modern.js 提供的 API 进行渲染，并通过 API 返回的工具函数进行断言。

测试用例文件的示例：

```ts
import { renderApp, waitFor } from '@modern-js/runtime/testing';
import ContactContainer from './Contacts';

describe('test contracts model', () => {
  it('actions works well', async () => {
    const { getByText } = renderApp(<ContactContainer source="items" />);

    await waitFor(() => {
      expect(getByText('Pending...')).toBeInTheDocument();
    });
  });
});
```

:::info 注
更多相关内容可以查看 [Test API](/docs/apis/runtime/testing/renderApp)。
:::

执行 `pnpm run test`，可以看到测试报告。

---

> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c11/hello-modern-4)。