Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

useSortable integration mocking in Vitest #4545

Unanswered
alexmccabe asked this question in Q&A
useSortable integration mocking in Vitest #4545
@alexmccabe alexmccabe
Jan 28, 2025 · 1 comment
Return to top
Discussion options

alexmccabe
Jan 28, 2025

I am testing a component that makes use of the useSortable function. The problem is, when I mock the return value of useSortable to include the option function, then JS heap runs out of memory. If I don't mock this return value, everything is fine on Vitest side, however the code then doesn't run because it's missing the option return.

Component:

const data = useSortable(listRef, model, {
  chosenClass: 'd-list-selector-item-chosen',
  dragClass: 'd-list-selector-item-dragging',
  ghostClass: 'd-list-selector-item-ghost',
  handle: '.d-list-selector-item-handle',
});

watchEffect(() => {
  data.option('sort', isSortable.value);
  data.option('disabled', !isSortable.value);
});

Test

vi.mock('@vueuse/integrations/useSortable', async () => {
  return {
    useSortable: vi.fn().mockImplementation(() => {
      // If I remove `option` from the following, tests run but runtime code fails
      return { option: vi.fn() };
    }),
  };
});

it.only('should make the list sortable', async () => {
  const wrapper = mount(DListSelector, {
    props: { ...defaultProps, items },
  });

  expect(useSortable).toHaveBeenCalledWith(
    expect.any(Object),
    expect.any(Object),
    expect.objectContaining({ disabled: true, sort: false })
  );
});

I am very confused by this behaviour, I've never experienced it before. Looking at the source for the option function, it doesn't do anything crazy.

Mocking @vueuse/core and sortable.js doesn't resolve the issue either. Even if I remove calls to the option function, this issue still occurs
You must be logged in to vote

Replies: 1 comment

Comment options

dosubot[bot]
bot Jan 28, 2025

Hey @alexmccabe! I'm here to help you with any bugs, questions, or contributions while you wait for a human maintainer. Let's tackle this issue together!

The issue you're experiencing with the JS heap running out of memory when mocking the option function in useSortable might be related to how the mock is implemented or used in your test setup. Here are a few suggestions to help you troubleshoot and resolve the problem:

  1. Check for Recursive Calls: Ensure that there are no recursive calls or circular dependencies in your mock implementation that could lead to excessive memory usage.

  2. Simplify the Mock: Try simplifying the mock implementation to see if the issue persists. For example, you can start by returning an empty object and gradually add back the mocked functions to identify which part is causing the memory issue.

  3. Isolate the Problem: Comment out parts of your test or component code to isolate the problem. This can help you determine if the issue is with the mock itself or how it's being used in the test.

  4. Use a Spy Instead of a Mock: Instead of mocking the entire useSortable function, consider using a spy to track calls to the option function. This can sometimes reduce complexity and avoid memory issues.

  5. Review Test Environment: Ensure that your test environment is properly configured and that there are no other factors (e.g., other mocks or test setup code) contributing to the memory issue.

  6. Check for Memory Leaks: Use tools like Chrome DevTools or Node.js memory profiling to check for memory leaks in your test setup.

By following these steps, you should be able to identify the root cause of the memory issue and adjust your mock or test setup accordingly.

To continue talking to Dosu, mention @dosu.

Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other
You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
🙏
Q&A
Labels
None yet
1 participant
@alexmccabe
Morty Proxy This is a proxified and sanitized view of the page, visit original site.