英文:
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 'vitest';
import { fireEvent, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import renderWithProviders from 'utils/renderWithProviders';
import QuantityInput from '.';
describe('when decrement button is clicked', () => {
  it('should decrement if count is greater than minCount', async () => {
    const setCountMock = vi.fn();
    const user = userEvent.setup();
    renderWithProviders(<QuantityInput count={3} minCount={2} setCount={setCountMock} />);
    await user.click(screen.getByLabelText('Decrease quantity'));
    // fireEvent.click(screen.getByLabelText('Decrease quantity'));
    expect(setCountMock).toHaveBeenCalledTimes(1);
    expect(setCountMock).toHaveBeenCalledWith(2);
  });
});
My package.json:
{
  "name": "ecommerce",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "test": "vitest"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.0.0",
    "@reduxjs/toolkit": "^1.9.3",
    "classnames": "^2.3.2",
    "cross-fetch": "^3.1.6",
    "firebase": "^9.18.0",
    "msw": "^1.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hookform": "^7.43.7",
    "react-icons": "^4.8.0",
    "react-loader-spinner": "^5.3.4",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.9.0",
    "tailwindcss": "^3.3.2",
    "vite-tsconfig-paths": "^4.0.7",
    "zod": "^3.21.4"
  },
  "devDependencies": {
    "@testing-library/dom": "^9.2.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.55.0",
    "@typescript-eslint/parser": "^5.55.0",
    "@vitejs/plugin-react": "^3.1.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.2.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.7.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "postcss": "^8.4.21",
    "prettier": "^2.8.6",
    "prettier-plugin-tailwindcss": "^0.2.5",
    "typescript": "^4.9.3",
    "vite": "^4.2.0",
    "vitest": "^0.29.8"
  }
}
英文:
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 'vitest';
import { fireEvent, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import renderWithProviders from 'utils/renderWithProviders';
import QuantityInput from '.';
describe('when decrement button is clicked', () => {
  it('should decrement if count is greater than minCount', async () => {
    const setCountMock = vi.fn();
    const user = userEvent.setup();
    renderWithProviders(<QuantityInput count={3} minCount={2} setCount={setCountMock} />);
    await user.click(screen.getByLabelText('Decrease quantity'));
    // fireEvent.click(screen.getByLabelText('Decrease quantity'));
    expect(setCountMock).toHaveBeenCalledTimes(1);
    expect(setCountMock).toHaveBeenCalledWith(2);
  });
});
My package.json:
{
  "name": "ecommerce",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "test": "vitest"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.0.0",
    "@reduxjs/toolkit": "^1.9.3",
    "classnames": "^2.3.2",
    "cross-fetch": "^3.1.6",
    "firebase": "^9.18.0",
    "msw": "^1.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.43.7",
    "react-icons": "^4.8.0",
    "react-loader-spinner": "^5.3.4",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.9.0",
    "tailwindcss": "^3.3.2",
    "vite-tsconfig-paths": "^4.0.7",
    "zod": "^3.21.4"
  },
  "devDependencies": {
    "@testing-library/dom": "^9.2.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.55.0",
    "@typescript-eslint/parser": "^5.55.0",
    "@vitejs/plugin-react": "^3.1.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.2.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.7.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "postcss": "^8.4.21",
    "prettier": "^2.8.6",
    "prettier-plugin-tailwindcss": "^0.2.5",
    "typescript": "^4.9.3",
    "vite": "^4.2.0",
    "vitest": "^0.29.8"
  }
}
答案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 'vitest';
import { fireEvent, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import renderWithProviders from 'utils/renderWithProviders';
import QuantityInput from '.';
describe('when decrement button is clicked', () => {
  it('should decrement if count is greater than minCount', async () => {
    const setCountMock = vi.fn();
    const user = userEvent.setup();
    renderWithProviders(<QuantityInput count={3} minCount={2} setCount={setCountMock} />);
    await user.click(screen.getByLabelText('Decrease quantity'));
    // fireEvent.click(screen.getByLabelText('Decrease quantity'));
    expect(setCountMock).toHaveBeenCalledTimes(1);
    expect(setCountMock).toHaveBeenCalledWith(2);
  });
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。


评论