小编tom*_*zub的帖子

我在 Vite/React/TypeScript 应用程序中，正在使用 Vitest 配置我的第一个测试。

当我运行 Button 测试 (yarn vitest) 时，出现以下错误：

packages/frontend/src/components/Generic/Button/Button.test.tsx > Button > should render the button
ReferenceError: document is not defined

据我所知，Vitest 不能与 JSDom 一起使用。我尝试过几件事：

• KO：在 vite.config.ts 文件中指定使用 JSDom
• OK：添加 vitest.config.ts 文件指定使用 JSDom
• OK：在测试文件顶部添加注释（@vitest-environment jsdom）

我更喜欢使用第一个选项（使用 vite.config.ts）来仅共享一个配置。是否可以 ？

注 1：我已经安装的 JSdom 有“devDependency”。注 2：要使用 vitest.config.ts，我应该像这样更新 package.json 中的脚本： "test": "vitest --config ./packages/frontend/vitest.config.ts"

这是我的文件：

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import viteTsConfigPaths from 'vite-tsconfig-paths'
import tailwindcss from 'tailwindcss'

export default defineConfig({
  server: {
    port: …

当我运行故事书时，我的别名将被忽略。当我运行我的项目时它工作得很好。

我尝试在 main.js 文件中定义所有别名，但效果不佳。你知道为什么吗 ？

我已经访问过此页面，我认为我做了正确的配置（？）https://storybook.js.org/docs/react/builders/webpack

下面是我的代码。

这是我的依赖项（package.json）：

"@storybook/addon-a11y": "^6.5.16",
"@storybook/addon-postcss": "^2.0.0",
"storybook-addon-sass-postcss": "^0.1.3",
"storybook-react-i18next": "^1.1.2",
"@storybook/addon-actions": "^6.5.16",
"@storybook/addon-essentials": "^6.5.16",
"@storybook/addon-interactions": "^6.5.16",
"@storybook/addon-links": "^6.5.16",
"@storybook/builder-vite": "^0.4.0",
"@storybook/react": "^6.5.16",
"@storybook/testing-library": "^0.0.13"

这是我的故事书配置文件（main.js）

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
const path = require('path')

module.exports = {
  stories: [
    "../packages/frontend/src/**/*.stories.mdx",
    "../packages/frontend/src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "storybook-react-i18next",
    "@storybook/addon-a11y",
    "@storybook/addon-postcss",
    "storybook-addon-sass-postcss"
  ],
  framework: "@storybook/react",
  core: {
    builder: "@storybook/builder-vite"
  },
  features: {
    storyStoreV7: true
  },
  webpackFinal: async (config) => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || …

我想强制以大写形式输入表单。

我使用了一种onChange方法和 React Hooks，但它不起作用，我不知道为什么......这是非常基本的，但我是 React 初学者。

我在更高的组件上导入了我的 Redux 存储： props name -> "facture"

import React, { useState } from 'react'
import { Col, Row } from 'mdmrc/lib/components/grid'
import { Button } from 'mdmrc/lib/components/button'
import { Form } from 'mdmrc/lib/components/form'
import { Input } from 'mdmrc/lib/components/input'
import { useTranslation } from 'react-i18next'

/**
 * composant de mise à jour des données de la facture
 */
export const UpdateForm = ({ classes, onSubmit, facture }) => {
  // ajout de …