TypeError: element.ownerDocument.getSelection is not a function

huangapple go评论73阅读模式
英文:

Vitest testing library userEvent - TypeError: element.ownerDocument.getSelection is not a function

问题

以下是您要翻译的内容:

"When using fireEvent from @testing-library/react tests are passing and everything is fine. <br />
I am trying to use @testing-library/user-event, which the testing-library docs recommend using, but after changing the click event to await user.click() the tests fail with the following error:

TypeError: element.ownerDocument.getSelection is not a function

I am wondering if it is a vitest problem and I should stick to the fireEvent api, or I am simply missing something.

The test code:

import { vi } from &#39;vitest&#39;;
import { fireEvent, screen } from &#39;@testing-library/react&#39;;
import userEvent from &#39;@testing-library/user-event&#39;;
import renderWithProviders from &#39;utils/renderWithProviders&#39;;
import QuantityInput from &#39;.&#39;;

describe(&#39;when decrement button is clicked&#39;, () =&gt; {
  it(&#39;should decrement if count is greater than minCount&#39;, async () =&gt; {
    const setCountMock = vi.fn();
    const user = userEvent.setup();
    renderWithProviders(&lt;QuantityInput count={3} minCount={2} setCount={setCountMock} /&gt;);
    await user.click(screen.getByLabelText(&#39;Decrease quantity&#39;));
    // fireEvent.click(screen.getByLabelText(&#39;Decrease quantity&#39;));
    expect(setCountMock).toHaveBeenCalledTimes(1);
    expect(setCountMock).toHaveBeenCalledWith(2);
  });
});

My package.json:

{
  &quot;name&quot;: &quot;ecommerce&quot;,
  &quot;private&quot;: true,
  &quot;version&quot;: &quot;0.0.0&quot;,
  &quot;type&quot;: &quot;module&quot;,
  &quot;scripts&quot;: {
    &quot;dev&quot;: &quot;vite&quot;,
    &quot;build&quot;: &quot;tsc &amp;&amp; vite build&quot;,
    &quot;preview&quot;: &quot;vite preview&quot;,
    &quot;test&quot;: &quot;vitest&quot;
  },
  &quot;dependencies&quot;: {
    &quot;@hookform/resolvers&quot;: &quot;^3.0.0&quot;,
    &quot;@reduxjs/toolkit&quot;: &quot;^1.9.3&quot;,
    &quot;classnames&quot;: &quot;^2.3.2&quot;,
    &quot;cross-fetch&quot;: &quot;^3.1.6&quot;,
    &quot;firebase&quot;: &quot;^9.18.0&quot;,
    &quot;msw&quot;: &quot;^1.2.1&quot;,
    &quot;react&quot;: &quot;^18.2.0&quot;,
    &quot;react-dom&quot;: &quot;^18.2.0&quot;,
    &quot;react-hookform&quot;: &quot;^7.43.7&quot;,
    &quot;react-icons&quot;: &quot;^4.8.0&quot;,
    &quot;react-loader-spinner&quot;: &quot;^5.3.4&quot;,
    &quot;react-redux&quot;: &quot;^8.0.5&quot;,
    &quot;react-router-dom&quot;: &quot;^6.9.0&quot;,
    &quot;tailwindcss&quot;: &quot;^3.3.2&quot;,
    &quot;vite-tsconfig-paths&quot;: &quot;^4.0.7&quot;,
    &quot;zod&quot;: &quot;^3.21.4&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;@testing-library/dom&quot;: &quot;^9.2.0&quot;,
    &quot;@testing-library/jest-dom&quot;: &quot;^5.16.5&quot;,
    &quot;@testing-library/react&quot;: &quot;^14.0.0&quot;,
    &quot;@testing-library/user-event&quot;: &quot;^14.4.3&quot;,
    &quot;@types/react&quot;: &quot;^18.0.28&quot;,
    &quot;@types/react-dom&quot;: &quot;^18.0.11&quot;,
    &quot;@typescript-eslint/eslint-plugin&quot;: &quot;^5.55.0&quot;,
    &quot;@typescript-eslint/parser&quot;: &quot;^5.55.0&quot;,
    &quot;@vitejs/plugin-react&quot;: &quot;^3.1.0&quot;,
    &quot;autoprefixer&quot;: &quot;^10.4.14&quot;,
    &quot;eslint&quot;: &quot;^8.2.0&quot;,
    &quot;eslint-config-airbnb&quot;: &quot;^19.0.4&quot;,
    &quot;eslint-config-airbnb-typescript&quot;: &quot;^17.0.0&quot;,
    &quot;eslint-config-prettier&quot;: &quot;^8.7.0&quot;,
    &quot;eslint-plugin-import&quot;: &quot;^2.25.3&quot;,
    &quot;eslint-plugin-jsx-a11y&quot;: &quot;^6.5.1&quot;,
    &quot;eslint-plugin-prettier&quot;: &quot;^4.2.1&quot;,
    &quot;eslint-plugin-react&quot;: &quot;^7.28.0&quot;,
    &quot;eslint-plugin-react-hooks&quot;: &quot;^4.3.0&quot;,
    &quot;postcss&quot;: &quot;^8.4.21&quot;,
    &quot;prettier&quot;: &quot;^2.8.6&quot;,
    &quot;prettier-plugin-tailwindcss&quot;: &quot;^0.2.5&quot;,
    &quot;typescript&quot;: &quot;^4.9.3&quot;,
    &quot;vite&quot;: &quot;^4.2.0&quot;,
    &quot;vitest&quot;: &quot;^0.29.8&quot;
  }
}
英文:

When using fireEvent from @testing-library/react tests are passing and everything is fine. <br />
I am trying to use @testing-library/user-event, which the testing-library docs recommend using, but after changing the click event to await user.click() the tests fail with the following error:

TypeError: element.ownerDocument.getSelection is not a function

I am wondering if it is a vitest problem and I should stick to the fireEvent api, or I am simply missing something.

The test code:

import { vi } from &#39;vitest&#39;;
import { fireEvent, screen } from &#39;@testing-library/react&#39;;
import userEvent from &#39;@testing-library/user-event&#39;;
import renderWithProviders from &#39;utils/renderWithProviders&#39;;
import QuantityInput from &#39;.&#39;;

describe(&#39;when decrement button is clicked&#39;, () =&gt; {
  it(&#39;should decrement if count is greater than minCount&#39;, async () =&gt; {
    const setCountMock = vi.fn();
    const user = userEvent.setup();
    renderWithProviders(&lt;QuantityInput count={3} minCount={2} setCount={setCountMock} /&gt;);
    await user.click(screen.getByLabelText(&#39;Decrease quantity&#39;));
    // fireEvent.click(screen.getByLabelText(&#39;Decrease quantity&#39;));
    expect(setCountMock).toHaveBeenCalledTimes(1);
    expect(setCountMock).toHaveBeenCalledWith(2);
  });
});

My package.json:

{
  &quot;name&quot;: &quot;ecommerce&quot;,
  &quot;private&quot;: true,
  &quot;version&quot;: &quot;0.0.0&quot;,
  &quot;type&quot;: &quot;module&quot;,
  &quot;scripts&quot;: {
    &quot;dev&quot;: &quot;vite&quot;,
    &quot;build&quot;: &quot;tsc &amp;&amp; vite build&quot;,
    &quot;preview&quot;: &quot;vite preview&quot;,
    &quot;test&quot;: &quot;vitest&quot;
  },
  &quot;dependencies&quot;: {
    &quot;@hookform/resolvers&quot;: &quot;^3.0.0&quot;,
    &quot;@reduxjs/toolkit&quot;: &quot;^1.9.3&quot;,
    &quot;classnames&quot;: &quot;^2.3.2&quot;,
    &quot;cross-fetch&quot;: &quot;^3.1.6&quot;,
    &quot;firebase&quot;: &quot;^9.18.0&quot;,
    &quot;msw&quot;: &quot;^1.2.1&quot;,
    &quot;react&quot;: &quot;^18.2.0&quot;,
    &quot;react-dom&quot;: &quot;^18.2.0&quot;,
    &quot;react-hook-form&quot;: &quot;^7.43.7&quot;,
    &quot;react-icons&quot;: &quot;^4.8.0&quot;,
    &quot;react-loader-spinner&quot;: &quot;^5.3.4&quot;,
    &quot;react-redux&quot;: &quot;^8.0.5&quot;,
    &quot;react-router-dom&quot;: &quot;^6.9.0&quot;,
    &quot;tailwindcss&quot;: &quot;^3.3.2&quot;,
    &quot;vite-tsconfig-paths&quot;: &quot;^4.0.7&quot;,
    &quot;zod&quot;: &quot;^3.21.4&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;@testing-library/dom&quot;: &quot;^9.2.0&quot;,
    &quot;@testing-library/jest-dom&quot;: &quot;^5.16.5&quot;,
    &quot;@testing-library/react&quot;: &quot;^14.0.0&quot;,
    &quot;@testing-library/user-event&quot;: &quot;^14.4.3&quot;,
    &quot;@types/react&quot;: &quot;^18.0.28&quot;,
    &quot;@types/react-dom&quot;: &quot;^18.0.11&quot;,
    &quot;@typescript-eslint/eslint-plugin&quot;: &quot;^5.55.0&quot;,
    &quot;@typescript-eslint/parser&quot;: &quot;^5.55.0&quot;,
    &quot;@vitejs/plugin-react&quot;: &quot;^3.1.0&quot;,
    &quot;autoprefixer&quot;: &quot;^10.4.14&quot;,
    &quot;eslint&quot;: &quot;^8.2.0&quot;,
    &quot;eslint-config-airbnb&quot;: &quot;^19.0.4&quot;,
    &quot;eslint-config-airbnb-typescript&quot;: &quot;^17.0.0&quot;,
    &quot;eslint-config-prettier&quot;: &quot;^8.7.0&quot;,
    &quot;eslint-plugin-import&quot;: &quot;^2.25.3&quot;,
    &quot;eslint-plugin-jsx-a11y&quot;: &quot;^6.5.1&quot;,
    &quot;eslint-plugin-prettier&quot;: &quot;^4.2.1&quot;,
    &quot;eslint-plugin-react&quot;: &quot;^7.28.0&quot;,
    &quot;eslint-plugin-react-hooks&quot;: &quot;^4.3.0&quot;,
    &quot;postcss&quot;: &quot;^8.4.21&quot;,
    &quot;prettier&quot;: &quot;^2.8.6&quot;,
    &quot;prettier-plugin-tailwindcss&quot;: &quot;^0.2.5&quot;,
    &quot;typescript&quot;: &quot;^4.9.3&quot;,
    &quot;vite&quot;: &quot;^4.2.0&quot;,
    &quot;vitest&quot;: &quot;^0.29.8&quot;
  }
}

答案1

得分: 0

/**

  • 请尝试在你的测试文件顶部添加一个jest环境指令:@jest-environment jsdom
    */
英文:

try to add a jest environment directive in the top of your test files. @jest-environment jsdom

/**
 * @jest-environment jsdom
 */

import { vi } from &#39;vitest&#39;;
import { fireEvent, screen } from &#39;@testing-library/react&#39;;
import userEvent from &#39;@testing-library/user-event&#39;;
import renderWithProviders from &#39;utils/renderWithProviders&#39;;
import QuantityInput from &#39;.&#39;;

describe(&#39;when decrement button is clicked&#39;, () =&gt; {
  it(&#39;should decrement if count is greater than minCount&#39;, async () =&gt; {
    const setCountMock = vi.fn();
    const user = userEvent.setup();
    renderWithProviders(&lt;QuantityInput count={3} minCount={2} setCount={setCountMock} /&gt;);
    await user.click(screen.getByLabelText(&#39;Decrease quantity&#39;));
    // fireEvent.click(screen.getByLabelText(&#39;Decrease quantity&#39;));
    expect(setCountMock).toHaveBeenCalledTimes(1);
    expect(setCountMock).toHaveBeenCalledWith(2);
  });
});

huangapple
  • 本文由 发表于 2023年5月29日 20:18:22
  • 转载请务必保留本文链接:https://go.coder-hub.com/76357318.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定