stenciljs 学习八 组件测试

测试对于框架来说比较重要，对于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