0

I haven't been able to find any examples or any super helpful info on this. I did find someone posting that track variables are not publicly available to element when you do this:

const element = createElement('c-lookup-input', {
    is: lookupInput
});

When a user starts typing, it calls out to Apex to get info that matches what was typed. So this callout has to be mocked, which I have in a json in a data folder in my __tests__ folder.

But then a dropdown gets rendered if data is found. But this is dependent on a tracked variable changing data (the search results).

Without being able to set this variable to my mocked data, the test tests nothing... My plan was to have it test rendering to ensure the drop down exists when data is available, but I'll need to set that tracked variable.

Is this simply not possible in jest tests?

2
  • Could you share how are you trying to assign the data to the @track variable?
    – Pirata21
    Commented May 21, 2020 at 16:58
  • Well I was just trying to read it directly (to expect element.myVariable.length to be greater than 0). But saying myVariable was undefined on element because they can't be accessed. I could set element.myVariable in my test, but then it isn't testing anything. And I doubt that would tie back to the track variable. Will my component just return what I emit from my mock when it runs into the apex method? Like it functions like it normally would, but 'pretends' it hit Apex and returns the emit instead? @Pirata21 Commented May 21, 2020 at 18:01

1 Answer 1

1

No this is not possible to access the internal component state from outside the component. This not only in test mode, but also in production mode.

In your specific case, I am suspecting that the list of results you got back from the Apex controller is rendered in the DOM. You can check if the list contains the items you expect by querying the dom.

it('should render the list with matching items', async () => {
  const element = createElement('c-lookup-input', {
    is: lookupInput
  });
  document.body.appendChild(element);

  // Simulate a user typing
  element.shadowRoot.querySelector('input').value = 'f';

  // ... Wait for Apex response ...

  // Assert that the DOM contains the expected entries
  const entries = Array.from(element.shadowRoot.querySelectorAll('li'))
    .map(item => item.textContent);
  expect(entries).toEqual(['foo', 'fuzz', 'fizz']);
});

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .