utquidem/website/docs/guides/tutorials/c10-model/10.4-testing.md

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

---
title: 测试 Model
---

上一小节中我们学习了如何使用 Model。

这一小节里我们来测试 Model。

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

以 `models/contacts` 为例，我们创建对应的 `.test` 文件：

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

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

```bash
touch src/contacts/models/contacts.test.ts
```

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

```powershell
ni src/contacts/models/contacts.test.ts
```

</TabItem>
</Tabs>

在测试用例中可以使用 Modern.js 提供的 Model 模拟，可以调用这个对象的方法写断言。

我们直接使用 createStore API 来编写测试文件，示例内容如下：

```ts
import { createStore } from '@modern-js/runtime/testing';
import contactsModel from './contacts';

const mockItem = {
  avatar: '',
  name: '李华',
  age: '16',
  email: 'lihua@gmail.com',
  archived: false,
};

describe('test contracts model', () => {
  it('actions works well', async () => {
    const store = createStore();
    const [state, actions] = store.use(contactsModel);

    state.items.push(mockItem);
    expect(store.use(contactsModel)[0].items.length).toBe(1);
    expect(store.use(contactsModel)[0].items[0].archived).toBeFalsy();

    await actions.archive('lihua@gmail.com');
    expect(store.use(contactsModel)[0].items[0].archived).toBeTruthy();
  });
});
```

:::info 注
更多相关内容可以查看[在 React 组件外使用 Model](/docs/guides/features/runtime/model/use-out-of-react)。
:::

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

---

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