React16 Jest单元测试 之 Testing Asynchronous Code(Async/Await)

{app.params.name}} {app.params.name}} {app.params.name}}

通常Javascript代码很多情况下是异步运行的,当代码异步运行的时候,Jest需要知道什么运行结束,然后进行下一个单元测试,Jest自身就有需要方法来处理这个。下面记录如下

项目初始化【这里还是之前的项目,省的在配置麻烦】

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag:v_1.0.16

拉取

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.16
npm install 

 

Async/Await

上篇文章分享了关于异步测试的,这里继续分享下使用Async/Await进行异步测试

使用Async/Await写测试只需要在写测试的时候在function前面加入async关键字就可以了,比如下面的测试

const fetchData = (err) => {
  const promise = new Promise((resolve, reject) => {
    if (err) {
      return reject('error');
    }

    return setTimeout(() => resolve('gowhich'), 3000);
  });
  return promise;
};


test('data的数据是"gowhich"', async () => {
  const data = await fetchData();
  expect(data).toBe('gowhich');
});

test('获取数据失败', async () => {
  try {
    await fetchData(true);
  } catch (err) {
    expect(err).toBe('error');
  }
});

也可以将async/await和.resolves或者.rejects结合来使用,如下

const fetchData = (err) => {
  const promise = new Promise((resolve, reject) => {
    if (err) {
      return reject('error');
    }

    return setTimeout(() => resolve('gowhich'), 3000);
  });
  return promise;
};

test('data的数据是"gowhich"', async () => {
  await expect(fetchData()).resolves.toBe('gowhich');
});

test('获取数据失败', async () => {
  await expect(fetchData(true)).rejects.toMatch('error');
});

执行npm test,得到的结果如下

> webpack4_react16_reactrouter4@1.0.0 test /Users/durban/nodejs/webpack-react-demo
> jest --notify --watchman=false

 PASS  src/__tests__/jest_async_callback.test.js
 PASS  src/__tests__/CheckboxWithLabelComponent.test.jsx
 PASS  src/__tests__/jest_common.test.js
 PASS  src/__tests__/sum.test.js
 PASS  src/__tests__/jest_async_promise.test.js (6.718s)
 PASS  src/__tests__/jest_async_await.test.js (8.424s)

Test Suites: 6 passed, 6 total
Tests:       22 passed, 22 total
Snapshots:   0 total
Time:        10.927s
Ran all test suites.

在这些情况下,async和await实际上只是与promises示例使用的相同逻辑的语法糖。

这些形式都不是特别优于其他形式,您可以在代码库或甚至单个文件中混合使用它们。

这取决于哪种风格可以让你的测试更简单。

 

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag:v_1.0.17

 


版权声明

durban 创作并维护的 Gowhich 博客采用 创作共用保留署名-非商业-禁止演绎4.0国际许可证。

本文首发于 Gowhich 博客( https://www.gowhich.com ),版权所有,侵权必究。

本文永久链接: https://www.gowhich.com/blog/844

comments powered by Disqus