Salesforce Asked by ceez on November 25, 2021
I am trying to write Jest test for a component with two @wired
calls (both bound to functions), but I get assertion error about property of second @wire
call not being annotated with wire annotation.
Error: Assert Violation: @wire on "handlePicklistResult": dot-notation reactive parameter "accountObjectInfo.defaultRecordTypeId" must refer to a @wire property
Any suggestions?
Here is sample code that I am trying to test:
import { LightningElement, wire, track } from 'lwc';
import { getPicklistValues, getObjectInfo } from 'lightning/uiObjectInfoApi';
import TYPE_FIELD from '@salesforce/schema/Account.Type';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
export default class Democomponent extends LightningElement {
@track accountObjectInfo;
@track error;
@track picklistValues;
@wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
handleResult({error, data}) {
if(data) {
this.accountObjectInfo = data;
} else {
this.error = error;
}
}
@wire(getPicklistValues, {recordTypeId: "$accountObjectInfo.defaultRecordTypeId", fieldApiName: TYPE_FIELD})
handlePicklistResult({error, data}) {
if(data) {
this.picklistValues = data.values;
} else {
this.error = error;
}
}
}
Simple test I want to perform:
import {registerLdsTestWireAdapter} from '@salesforce/sfdx-lwc-jest';
import {createElement} from 'lwc';
import {getObjectInfo, getPicklistValues} from 'lightning/uiObjectInfoApi';
import TestPage from 'c/testPage';
const mockGetObjectInfo = require('./data/getObjectInfo.json');
const mockGetPicklistValues = require('./data/getPicklistValues.json');
const getObjectInfoAdapter = registerLdsTestWireAdapter(getObjectInfo);
const getPicklistValuesAdapter = registerLdsTestWireAdapter(getPicklistValues);
describe('c-test-page', () => {
it('Should display test page', () => {
const element = createElement('c-test-page', {
is: TestPage
});
document.body.appendChild(element);
getObjectInfoAdapter.emit(mockGetObjectInfo);
getPicklistValuesAdapter.emit(mockGetPicklistValues);
const picklistItems = element.shadowRoot.querySelectorAll('div.picklistItem');
expect(picklistItems.length).toEqual(5);
});
});
There are several things that you need to correct in your test.
The most important one is that you don't need to fire both wires if you're just testing for the state of the template.
Firing the getObjectInfo
wire is not needed for this test because the test doesn't use the value of the recordTypeId
parameter in the getPicklistValues
test wire.
Then, you need to wait for the component to re-render after emitting data through the wire. We generally use a Promises.resolve()
call to do that (see LWC Recipes).
Also, don't test with a hardcoded item length: expect(picklistItems.length).toEqual(5);
. Use a dynamic value from your mock data instead: expect(picklistItems.length).toBe(mockGetPicklistValues.values.length);
.
Here's the updated test that passes:
describe("c-test-page", () => {
it("Should display test page", () => {
const element = createElement("c-test-page", {
is: TestPage
});
document.body.appendChild(element);
getPicklistValuesAdapter.emit(mockGetPicklistValues);
// Return a promise to wait for any asynchronous DOM updates. Jest
// will automatically wait for the Promise chain to complete before
// ending the test and fail the test if the promise rejects.
return Promise.resolve().then(() => {
const picklistItems = element.shadowRoot.querySelectorAll(
".picklistItem"
);
expect(picklistItems.length).toBe(mockGetPicklistValues.values.length);
});
});
});
Answered by POZ on November 25, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP