5

If I have a property called markers in my component, which is exposed using the @api notation. How can I make sure that it contains the correct values after the component goes through the jest unit test?

I know that using the following throws an error, because the property is being passed as undefined:

expect(comp.mapMarkers).toHaveLength(2)

Outputting:

expect(received)[.not].toHaveLength(length)

Expected value to have a 'length' property that is a number. Received:
  undefined

However, I have the lightning-map component around a template tag in which the condition to be rendered is that the mapMarkers property mustn't be null or empty:

<template if:true={mapMarkers}>
    <lightning-map
        map-markers={mapMarkers}
        markers-title={markersTitle}
        zoom-level={zoomLevel}
    ></lightning-map>
</template>

And the following assertion passes:

expect(comp.shadowRoot.querySelector('lightning-map')).not.toBeNull()

Which means, in my understanding, that the map component should be rendered on the screen.

  • 2
    It might be worth cross posting this onto Stackoverflow: jestjs because there are over 5,793 questions tagged with jestjs there, so the pool of people with relevant experience might be bigger – Robs Apr 28 at 10:34
  • I don't think this would help. The problem is basically "how to access the component's properties during assertion." This has little to do with Jest, and more with how LWC's createElement method works, and how the component's attributes should be accessed (looking into the sample tests one might get the impression that they shouldn't, but that doesn't sound a good thing). – Renato Oliveira Apr 28 at 22:04
2

Turns out that it is possible to get the component's attributes in a simple way, just accessing them directly, like:

expect(comp.mapMarkers).toHaveLength(2)

The catch here is that you have to "return a promise in the unit test, 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."

So the last lines of the test method look like this:

it('Should render the map with two markers.', () => {

    // ... mocking, instancing, etc


    // asserts the child component is rendered in our component
    expect(comp.shadowRoot.querySelector('lightning-map')).not.toBeNull()

    // asserts the property is properly populated with the information
    // that comes from the database (which was mocked in the beginning
    // of the test)
    return Promise.resolve(() => {
        expect(comp.mapMarkers).toHaveLength(2)
    })
})

This solution was found on a snippet on the blog post "Unit Test Lightning Web Components with Jest", under the section "Salesforce specifics".

https://developer.salesforce.com/blogs/2019/03/unit-test-lightning-web-components-with-jest.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.