我们知道，jest 是 facebook 用来测试 javascript 应用的一套测试框架，那么也包含了一些应用，它的优点其中就包括了对于react 的支持，也很容易支持其他框架，那么今天我们就教大家怎么用jest测试js应用
从最简单的开始，我们可以看看如何用 jest 测试纯 js 项目。
假设你需要测试 sum.js:
export default (a, b) => a + b
你只需要对应地新建一个 sum.test.js[1]:
import sum from './sum'
test('sum', () => {
expect(sum(2, 3)).tobe(5)
})
关于这里的 `expect` 语法
然后在终端运行 jest 命令的时候就会自动找到这个文件，执行这里面的测试:
额，报错了，原来 jest 默认只支持你所使用的 node.js 版本所支持的 js 特性，例如 import export 就不支持，所以要么你的代码使用系统 node.js 兼容的语法写 (也就是使用 require)，要么在这里使用 babel 转义一下。
在 jest 中使用 babel 很简单，只需要安装 babel-jest 并新建一个 .babelrc 加入你想要的配置就行了，jest 会自动使用 babel-jest。这里我们简单地使用 babel-preset-env 即可，对应的 .babelrc 是:
{
"presets": ["env"]
}
然后重新运行 jest 测试便通过了:
jest 2
对于 react 应用，基本和纯 js 项目类似，不过你需要在 .babelrc 中配置对 jsx 的支持，在大多数时候你的项目本身就已经在使用 .babelrc 了，所以这一步甚至也省略掉了。
资源文件
当你要测试的代码引用了非 js 文件时，jest 就不知道如何使用这些文件了，例如你的 webpack 项目中的一个文件:
import './style.css'
正如你需要在 webpack 中配置了 css-loader 一样，你也需告诉 jest 如何处理 css 文件。
{
"jest": {
"transform": {
"^.+\\.(js|jsx)$": "babel-jest",
"^.+\\.css$": "<rootdir>/jest/css-transform.js"
}
}
}
关于 babel-jest
对应的 ./jest/css-transform.js
// 大多数测试并不关心 css 文件里的内容
// 所以这里我们直接返回一个空的对象
module.exports = {
process() {
return 'module.exports = {};'
},
getcachekey() {
// the output is always the same.
return 'css-cache'
}
}
类似地，你可以使用 transform 来设定如何处理其它类型的文件，比如 .vue[2] .svg 文件。
浏览器 api
假设你要测试的是一个 web 应用，依赖于一些浏览器 api 比如 window document，它在 jest 中同样可以正常运行，因为 jest 默认使用了 js-dom 来模拟浏览器环境，不需要浏览器环境时可以通过使用命令行参数 --env node 或者配置文件来禁用。
snapshot 测试
当你期望某个值不会改变的时候，可以使用 snapshot 测试。简单地说，它就是记录这个值的状态到本地自动生成的 snapshot 文件里，然后在下一次测试中用新的值来和其进行对比。这对 ui 之类的测试很有帮助:
import react from 'react'
import link from '../link.react'
import renderer from 'react-test-renderer'
it('renders correctly', () => {
const tree = renderer
.create(<link page="http://www.facebook.com">facebook</link>)
.tojson()
expect(tree).tomatchsnapshot()
})
这确保了 <link page="http://www.facebook.com">facebook</link> 渲染出的内容不会出错。
当你更改了 <link> 组件的逻辑，需要更新 snapshot 文件时，可以加上 --updatesnapshot 或者 -u 来更新。
类似的，snapshot 测试不止于 ui 测试中，假设你写了个 markdown 解析器，你可以用它来确保解析出的内容不会改变:
import rendermarkdown from './my-markdown-parser'
test('render correctly', () => {
const html = rendermarkdown('# markdown code')
expect(html).tomatchsnapshot()
})
相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！
相关阅读：
怎么用css3做出灯光照射显示文字动画
css3点击显示涟漪特效
css3怎么制作蝴蝶飞舞的动画
以上就是怎样用 jest 测试 javascript 应用的详细内容。