小编Kla*_*ark的帖子

我不知道如何测试按键按下事件并防止默认。测试到达代码但从preventDefault未被调用：Received number of calls: 0

反应组件- App.js

  const onKeyDown = e => {
      console.log("==== TEST REACHED HERE ====")
      e.preventDefault(); // NEVER CALLED ???
  };
  useEffect(() => {
    document.addEventListener("keydown", onKeyDown, false);
    return () =>
      document.removeEventListener("keydown", onKeyDown, false);
  }, []);

单元测试

it("should prevent default action on key down", () => {
   const { getByRole } = render(<App {...props} />);
   const grid = getByRole("app");
   const mockEvent = { preventDefault: jest.fn() };
   fireEvent.keyDown(grid, mockEvent);
   expect(mockEvent.preventDefault).toHaveBeenCalledTimes(1);
});

动态导入组件与以下内容有什么区别ssr: true：

const DynamicButton = dynamic(() => import('./Button').then((mod) => mod.Button), {
  ssr: true,
});

和普通的组件导入：

import { Button } from './Button';

• 一种相对于另一种有什么好处？
• 我们把负载放在哪里？
• 对于下面的场景（JSX 示例），如果showButton是false，我们是否仍然加载DynamicButton以及加载到哪里？

// jsx
return showButton && <DynamicButton />

我在调试.ts文件中的角度组件时遇到问题。我正在使用VSCode和Debugger for Chrome扩展程序。

这是我的vscode启动文件：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:5000",
            "sourceMaps": true, 
            "webRoot": "${workspaceRoot}"        
        }
    ]
}

这是我的tsconfig.json文件：

{
  "compile": true,
  "comments":true,
  "module": "none",
  "target": "es5",
  "sourceMap": true,
  "sourceRoot": "",
  "mapRoot": "",
  "declaration": false
}

在角度组件内部，我在$ onInit周期中设置了一个断点：

$onInit = () => {
  for(let i = 0; i < 5; i++) { //here I put breakpoint
    let t = i;
  }
}

Debus成功启动（chrome打开），但没有任何反应。在我的编辑器中，如果我将鼠标悬停在断点上，则工具提示会显示一条消息：未 验证的断点。设置断点但尚未绑定

我正在使用1.24.1版本的vscode。

我想在我的应用程序中实现代码拆分功能。我按路线拆分我的应用程序，并为我用户require.ensure导入组件的每条路线拆分。我尝试将所有块放在块文件夹中，因此我更改了配置文件中的输出：

output: {
   filename: "chunks/bundle[name].js"
}

但是我收到了 404 错误。

错误：在 HTMLScriptElement.onScriptComplete 加载块 2 失败

所以我把它留在我有捆绑文件的文件夹中：

var webpack = require("webpack");
module.exports = {
    entry: "./js/app.js",
    output: {
        filename: "./bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: "vue-loader"
            },
            {
                test: /\.js$/,
                loader:"babel-loader"                
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader: "file-loader?name=element-ui/[name].[ext]"
            }       
        ]
    },
    resolve: {
        extensions: [ ".json", ".js", ".vue", ".css" ]
    },
    watch: true
};

现在可以工作，但我得到了这样的块结构：文件夹块结构。如何仅在一个文件夹中移动所有块。这是使用代码拆分功能的正确方法。

我想我错过了一些东西。请帮忙！