I wanted to use vite-jest as my test running with @testing-library/user-event and the test runner run into an error, sometimes, on certain mode.
A little background, my setup is running Vue 3 using Vite as well as Storybook with Vite builder.
Configurations
jest.config.ts
import type { Config } from "@jest/types";
const config: Config.InitialOptions = {
preset: "vite-jest",
testMatch: ["**/src/components/**/*.spec.ts?(x)"],
testEnvironment: "jest-environment-jsdom",
collectCoverageFrom: ["**/src/components/**/*.vue"],
setupFilesAfterEnv: ["<rootDir>/src/jest-setup.ts"],
watchman: false,
};
export default config;tsconfig.json
{
"compilerOptions": {
"target": "es2020",
"module": "esnext",
"lib": [
"esnext",
"dom",
"dom.iterable"
],
"allowJs": true,
"checkJs": true,
"jsx": "preserve",
"declaration": true,
"sourceMap": true,
"removeComments": true,
"importHelpers": true,
"strict": true,
"moduleResolution": "node",
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
},
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
},
"typeAcquisition": {
"enable": true
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"src/**/*.mdx",
"src/jest-setup.ts"
],
"exclude": [
"node_modules",
".storybook"
]
}jest-setup.ts
import "@testing-library/jest-dom";
package.json
{
"name": "design-system",
"version": "0.0.0",
"files": [
"dist"
],
"main": "./dist/my-lib.umd.js",
"module": "./dist/my-lib.es.js",
"exports": {
".": {
"import": "./dist/my-lib.es.js",
"require": "./dist/my-lib.umd.js"
}
},
"scripts": {
"dev": "vite",
"storybook": "start-storybook --ci --no-manager-cache -p 6006",
"storybook:docs": "start-storybook --ci --docs --no-manager-cache -p 6006",
"lint": "eslint --ignore-path .gitignore .",
"lint:fix": "eslint --fix --ignore-path .gitignore .",
"build:library": "vue-tsc --noEmit && vite build",
"build:storybook": "build-storybook --docs --loglevel verbose --output-dir docs",
"test": "vite-jest",
"test:clear": "vite-jest --no-cache",
"test:watch": "vite-jest --watch ",
"test:coverage": "vite-jest --coverage",
"test:debug": "vite-jest --detectOpenHandles",
},
"devDependencies": {
"@babel/core": "^7.14.6",
"@storybook/addon-a11y": "^6.3.0",
"@storybook/addon-actions": "^6.3.0",
"@storybook/addon-essentials": "^6.3.0",
"@storybook/addon-links": "^6.3.0",
"@storybook/testing-vue3": "0.0.1",
"@storybook/vue3": "^6.3.0",
"@tailwindcss/aspect-ratio": "^0.2.1",
"@tailwindcss/forms": "^0.3.3",
"@tailwindcss/line-clamp": "^0.2.1",
"@tailwindcss/typography": "^0.4.1",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/user-event": "^13.1.9",
"@types/jest": "^26.0.24",
"@typescript-eslint/eslint-plugin": "^4.28.0",
"@typescript-eslint/parser": "^4.28.0",
"@vitejs/plugin-vue": "^1.2.3",
"@vue/compiler-sfc": "^3.0.5",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"autoprefixer": "^10.2.6",
"babel-loader": "^8.2.2",
"eslint": "^7.29.0",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-jest-dom": "^3.9.0",
"eslint-plugin-mdx": "^1.13.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-tailwindcss": "^1.13.4",
"eslint-plugin-vue": "^7.12.1",
"jest": "^27.0.6",
"jest-environment-jsdom": "^27.0.6",
"postcss": "^8.3.5",
"postcss-preset-env": "^6.7.0",
"prettier": "^2.3.1",
"storybook-builder-vite": "^0.0.9",
"tailwindcss": "^2.2.2",
"ts-node": "^10.1.0",
"typescript": "^4.3.4",
"vite": "^2.3.8",
"vite-jest": "0.0.2",
"vue-loader": "^16.2.0",
"vue-tsc": "^0.0.24"
},
"dependencies": {
"@testing-library/vue": "^6.4.2",
"vue": "^3.1.2",
"vue-demi": "^0.9.1"
},
}What doesn't works?
When storybook is running, I encounter these errors, for all my test commands.
● Test suite failed to run
Cannot find module '/Users/macOS/Documents/Projects/design-system/node_modules/.vite/@testing-library_jest-dom.js' from 'src/jest-setup.ts'
at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:311:11)
After I shut down storybook, i ran it again.
npm run test
On first run, I got the same errors as above.
npm run test:watch or npm run test:coverage
Cannot find module '/Users/macOS/Documents/Projects/design-system/node_modules/.vite/@storybook_testing-vue3.js' from 'src/components/atoms/base-button/base-button.spec.ts'
at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:311:11)
npm run test:clear
I got these errors, no matter how many times i ran this command.
● Base Button › Should not be clickable when loading
TypeError: userEvent.tab is not a function
What works?
After running npm run test:clear once, I can run the test npm run test:watch or npm run test:coverage but npm run test return this same error above.
Cannot find module '/Users/macOS/Documents/Projects/design-system/node_modules/.vite/@storybook_testing-vue3.js' from 'src/components/atoms/base-button/base-button.spec.ts'
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent