英文:
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);
});
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论