测试对于框架来说比较重要，对于web 组件的测试同样很重要，类似的jest 很方便，stenciljs也是基于jest 开发的
包含两个核心api render(), flush()
测试配置
package.json 配置
"devDependencies": { ?????... ?????"@types/jest": "^21.1.1", ?????"jest": "^21.2.1" ?},npm script 配置
"scripts": { ?????... ?????"test": "jest --no-cache", ?????"test.watch": "jest --watch --no-cache" ?},组件渲染测试
主要函数
- render({components:[],html:string} ) 进行组件列表的渲染，html 是html 的代码片段，包含组件的使用
- flush(element) 用来在属性变更之后刷新元素
渲染组件
- components 组件列表
- html html 片段
参考
beforeEach(async () => { ?element = await render({ ???components: [MyName], ???html: ‘<my-name></my-name>‘ ?});});刷新组件
flush 函数
it(‘should work with both the first and the last name‘, async () => { ?element.first = ‘Peter‘ ?element.last = ‘Parker‘; ?await flush(element); ?expect(element.textContent).toEqual(‘Hello, my name is Peter Parker‘);});组件测试
参考
?it(‘should least each part of the name breaking on spaces‘, async () => { ?????element.first = ‘Pasta Primavera‘; ?????element.last = ‘O Shea Buttersworth‘; ?????await flush(element); ?????const list = element.querySelector(‘ul‘); ?????expect(list.children.length).toEqual(5); ?????expect(list.children[0].textContent).toEqual(‘Pasta‘); ?????expect(list.children[1].textContent).toEqual(‘Primavera‘); ?????expect(list.children[2].textContent).toEqual(‘O‘); ?????expect(list.children[3].textContent).toEqual(‘Shea‘); ?????expect(list.children[4].textContent).toEqual(‘Buttersworth‘); ???}); ???组件方法测试 ???it(‘should return an empty string if there is no first or last name‘, () => { ????const myName = new MyName(); ????expect(myName.formatted()).toEqual(‘‘); ???});参考资料
https://stenciljs.com/docs/unit-testing
stenciljs 学习八 组件测试
原文地址：https://www.cnblogs.com/rongfengliang/p/9711224.html