详解Jest结合Vue-test-utils使用的初步实践(9)

日期：2020-05-11 栏目：程序人生浏览：次

或者可以使用第三种方法，也就是使用async和await来测试异步代码：

// 可以用 Async/Await 测试 axios.get 方法返回值
it('Calls get promise result 3', async() = > {
 const result = await wrapper.vm.getAnswer();
 expect(result).toEqual(mockData)
});

Jest都提供了resolves和rejects方法作为then和catch的语法糖：

it('Calls get promise result 2', () = > {
 return wrapper.vm.getAnswer().then(result = > {
  expect(result).toEqual(mockData);
 })
});

it('Calls get promise result 4', async() = > {
 await expect(wrapper.vm.getAnswer()).resolves.toEqual(mockData)
});

mock依赖

我们可以创建一个__mocks__文件夹，将mock文件放入其中，这样就不必在每个测试文件中去单独的手动mock模块的依赖

在__mocks__文件夹下创建axios.js文件：

// test/__mocks__/axios.js
const mock = {
 get: jest.fn(() => Promise.resolve({
  data: {
   answer: 'mock_yes',
   image: 'mock.png'
  }
 }))
};
export default mock

这样就可以将Test3.spec.js中的jest.mock部分代码移除了。Jest会自动在__mocks__文件夹下寻找mock的模块，但是有一点要注意，模块的注册和状态会一直被保存，所有如果我们在Test3.spec.js最后增加一条断言：

// 如果不清除模块状态此条断言会失败
it('Axios should not be called here', () = > {
 expect(axios.get).not.toBeCalled()
});

因为我们在beforeEach中添加了axios.get的状态清除的语句 axios.get.mockClear()，所以上面的断言会通过，否则会失败。

也可以用另外resetModules和clearAllMocks来确保每次开始前都重置模块和mock依赖的状态。

beforeEach(() = > {
 wrapper = shallow(Test3);
 jest.resetModules();
 jest.clearAllMocks();
});

我们在项目中有时候会根据需要对不同的Http请求的数据进行Mock，以MockJS为例，一般每个组件（模块）都有对应的mock文件，然后通过index.js导入到系统。Jest也可以直接将MockJS的数据导入，只需要在setup.js中导入MockJS的index.js文件即可

测试插槽

插槽（slots）用来在组件中插入、分发内容。创建一个使用slots的组件Test4

// TEST4
<MessageList>
  <Message v-for="message in messages" :key="message" :message="message"></Message>
</MessageList>

// MessageList
<ul class="list-messages">
 <slot></slot>
</ul>

// Message
<li>{{message}}</li>

在测试slots时，我们的关注点是slots中的内容是否在组件中出现在该出现的位置，测试方法和前面介绍的测试DOM结构的方法相同。

详解Jest结合Vue-test-utils使用的初步实践(9)

相关推荐