jest 如何从0-1搭建单元测试?

lsekfe

安装依赖

1. <font size="3">cnpm install ts-jest jest  @types/jest --save-dev</font>

复制代码

配置
　　1、修改package.jsoin，在"scipts"添加"test": "jest", 如下：

1. <font size="3">"scripts": {
   
2. 
   
3. 　　    "start": "webpack-dev-server",
   
4. 
   
5. 　　    "build": "webpack --mode production",
   
6. 
   
7. 　　    "test": "jest"
   
8. 
   
9. 　　}</font>

复制代码

2、添加一个jest.config.js文件
　　填入如下内容：

1. <font size="3">module.exports = {
   
2. 
   
3. 　　    "moduleFileExtensions": [
   
4. 
   
5. 　　        "js",
   
6. 
   
7. 　　        "ts",
   
8. 
   
9. 　　        "tsx"
   
10. 
    
11. 　　    ],
    
12. 
    
13. 　　    "transform": {
    
14. 
    
15. 　　        "^.+\\.tsx?[        DISCUZ_CODE_2        ]quot;: "ts-jest",
    
16. 
    
17. 　　    },
    
18. 
    
19. 　　    "testMatch": [
    
20. 
    
21. 　　        "<rootDir>/tests/**/*.ts?(x)"
    
22. 
    
23. 　　    ]
    
24. 
    
25. 　　}</font>

复制代码

通过testMatch可以看到我们是检测 工程/tests/ 文件下的内容。一般是推荐在文件下面写测试文件，但是我比较喜欢在外面写。然后添加一个测试文件。
　　添加测试文件


这是我的目录，可以参考。
　　编写测试
　　参考下QAQ  具体看官方文档 jestjs.io/docs/zh-Han…

1. <font size="3">import { getSTyleStr, id } from '../../src/utils/utils'
   
2. 
   
3. 　　test('id', () => {
   
4. 
   
5. 　　    expect(id(1)).toBe(1)
   
6. 
   
7. 　　    expect(id(null)).toBe(null)
   
8. 
   
9. 　　    expect(id(void 0)).toBe(void 0)
   
10. 
    
11. 　　})
    
12. 
    
13. 　　describe('css class utils getSTyleStr', () => {
    
14. 
    
15. 　　    it('带大写的属性', () => {
    
16. 
    
17. 　　        expect(getSTyleStr({backgroundColor: "rgba(216,52,52,1)"}))
    
18. 
    
19. 　　        .toBe('background-color: rgba(216,52,52,1);')
    
20. 
    
21. 　　    })
    
22. 
    
23. 　　    it('单个属性', () => {
    
24. 
    
25. 　　        expect(getSTyleStr({width: "30px", height: "30px"}))
    
26. 
    
27. 　　        .toBe('width: 30px;height: 30px;')
    
28. 
    
29. 　　    })
    
30. 
    
31. 　　})</font>

复制代码

查看效果

1. <font size="3">npm run test</font>

复制代码

如果我们写错了，这时候：