|
|
相关文章推荐
|
坚韧的充值卡 · sed命令实现对文件内容的添加 - 裸睡的猪 · 1 月前 · |
|
|
曾深爱过的沙滩裤 · org.mockito.Answers.ge ...· 1 月前 · |
|
|
玩篮球的茴香 · [CMake教程] ...· 3 周前 · |
|
|
稳重的红豆 · Java单元测试典型案例集锦-阿里云开发者社区· 5 月前 · |
|
|
憨厚的水煮肉 · 在matplotlib中使用"contour ...· 10 月前 · |
|
|
一身肌肉的茶叶 · PHP 几种常见超时的设置方法 · ...· 1 年前 · |
|
|
曾经爱过的帽子 · 为什么Spring中xml注入Bean优先于 ...· 1 年前 · |
|
|
憨厚的日记本 · Vue服务器渲染优秀项目：Nuxt.js - 知乎· 1 年前 · |
推荐文章
|
|
坚韧的充值卡 · sed命令实现对文件内容的添加 - 裸睡的猪 1 月前 |
|
|
曾深爱过的沙滩裤 · org.mockito.Answers.get()Lorg/mockito/stubbing/Answer；：java.lang.NoSuchMethodError开发者社区 1 月前 |
|
|
稳重的红豆 · Java单元测试典型案例集锦-阿里云开发者社区 5 月前 |
|
|
憨厚的日记本 · Vue服务器渲染优秀项目：Nuxt.js - 知乎 1 年前 |
Test a Property Change
it('Renders with Hello Matt', () => { const element = createElement('c-hello-component', { is: HelloComponent, }); document.body.appendChild(element); element.person = "Matt"; return Promise.resolve().then(() => { const pTag = element.shadowRoot.querySelector('p'); expect(pTag.textContent).toEqual('Hello, Matt!'); it('Renders with showDesktopView = true', () => { const element = createElement('c-test', { is: testLWC, }); document.body.appendChild(element); element.showDesktopView = true; return Promise.resolve().then(() => { // My promise code
https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.unit_testing_using_jest_patterns
That is the same documentation I've been using. That is basically my Trial 2 approach, but document.body.appendChild(element) is before the element assignment. I tried it in that order as well, but it didn't work. The error I get back is the querySelector doesn't find the element. However, when I default the value in my code to true for showDesktopView (which I cannot leave it like that), the query selector does find the "Name" element it is looking for.
This is a closer representation of my code following what you suggested, but doens't work: it('Displays Contact Name field', () => { const element = createElement('c-test', { is: testLWC }); document.body.appendChild(element); element.showDesktopView = true; getRecordWireAdapter.emit(mockGetRecord); // Resolve a promise to wait for a rerender of the new content. return Promise.resolve().then(() => { const content = element.shadowRoot.querySelector('.myclass'); const nameField = mockGetRecord.fields.Name.value; console.log('Expected: ' + nameField) console.log('Found: ' + content.textContent); expect(content.textContent).toBe(nameField);
The error I get back is "TypeError: Cannot read property 'textContent' of null" which is recieved when the querySelector doesn't find the rendered element. Again, the test case does pass if I default the showDesktopView to true.
const content = element.shadowRoot.querySelector ('.myclass') ;
element.shadowRoot is not the common this.shadowRoot as you can find in the mozilla documentation but it is equivalent to this.template for LWC.
You can try in your code (not the jest test) if const content = this.template.querySelector('.myclass'); is resolved.
In my jest test, the element.shadowroot.querySelector does work if I default showDesktopView to true. The test case passes, it finds the name value.
I also found this in my jest test, if I use element.querySelector when default showDesktopView is true, the case fails.