小编Laz*_*ass的帖子

在Jest中有像toeCalled或toBeCalledWith这样的函数来检查是否调用了特定的函数.有没有办法检查没有调用该函数

我正在尝试使用babel,jest和vs代码调试一个简单的项目.当我设置一个断点然后开始调试时,我的断点会跳转并且不再是我开始时的位置.可以在这里看到样本回购 - https://github.com/RyanHirsch/starter-node

我已经更新了我launch.json的内容

{
  "name": "Jest",
  "type": "node",
  "request": "launch",
  "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
  "stopOnEntry": false,
  "args": ["-i", "${file}"],
  "cwd": "${workspaceRoot}",
  "runtimeExecutable": null,
  "sourceMaps": true,
  "protocol": "inspector"
}

我.babelrc看起来像:

{
  "plugins": ["@babel/plugin-proposal-object-rest-spread"],
  "sourceMaps": "inline",
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "6.10"
        }
      }
    ]
  ]
}

我认为源映射选项足以让它工作但我错了.需要更改什么才能将断点保留在原始位置？特别是在尝试调试我的测试时.

====编辑====

在断点位于测试线10和实施线4之前:

当我通过选择我的测试文件开始调试然后在VS Code调试窗格中运行Jest时,我的断点跳转到测试第9行和实现第6行:

在节点9.6.1上运行,具有以下扩展名:

DavidAnson.vscode-markdownlint
EditorConfig.EditorConfig
Orta.vscode-jest
PKief.material-icon-theme
PeterJausovec.vscode-docker
Shan.code-settings-sync
bungcip.better-toml
dbaeumer.vscode-eslint
dracula-theme.theme-dracula
dzannotti.vscode-babel-coloring
eamodio.gitlens
esbenp.prettier-vscode
gerane.Theme-FlatlandMonokai
humao.rest-client
mauve.terraform
mikestead.dotenv
mjmcloug.vscode-elixir
mohsen1.prettify-json
ms-vscode.Theme-MaterialKit
ms-vscode.azure-account
ms-vscode.cpptools
ritwickdey.LiveServer
sbrink.elm …

默认情况下，使用文本块定义字符串时，尾随空格将被删除，因为它被视为附带空格。

var text = """
    blah blah       
    blah        
    """;

如何保留文本块中的尾随空格，以便块中的每一行以相同的长度结尾？

不知道在哪里寻找此错误.

使用带有React的Typescript,以及用于单元测试的Jest和Enzyme.

Package.json示例:

"scripts": {
    "start": "node server.js",
    "bundle": "cross-env NODE_ENV=production webpack -p",
    "test": "jest"
  },
  "jest": {
    "transform": {
      "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json"
    ]
  }

运行npm测试结果:

FAIL src/components/Component.test.tsx

 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<?xml version="1.0" encoding="UTF-8"?>
                                                                                             ^

    SyntaxError: Unexpected token <

编辑:它似乎发生在我require用来加载静态.svg文件的第一个地方.为什么不能处理呢？有没有办法在使用require时忽略抛出此错误？

我仍在将我的 Enzyme 测试转移到 react-testing-library 的过程中，我有一个相当常见的场景，当一个组件安装时，它会启动一个 Ajax 请求来获取一些数据。就在获取开始之前，它设置一些状态值以指示它正在加载，这反过来呈现一个微调器。完成后，状态将更新为数据，并在适当的情况下将“loadingState”设置为“Completed”或“Failed”。

import React, { useEffect, useState } from "react";
import { SwapSpinner } from "react-spinners-kit";
import styled from "styled-components";
import * as R from "ramda";

import { getPeople } from "./getPeople";

const FlexCenter = styled.div`
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const loadingStates = {
  notStarted: "notStarted",
  isLoading: "isLoading",
  success: "success",
  failure: "failure"
};

function App() {
  const [people, setPeople] = useState([]);
  const [isLoading, setLoading] = useState(loadingStates.notStarted);

  useEffect(() => {
    setLoading(loadingStates.isLoading); …

我正在使用Typescript和新的React钩子为一个简单的React应用编写一些有趣的酶测试。

但是，我似乎无法正确模拟在useEffect挂钩内进行的api调用。

useEffect进行api调用，并useState使用“ setData” 更新状态“ data”。

然后将对象“数据”映射到表中与其对应的表单元格中。

似乎应该可以通过模拟的api响应和酶安装来轻松解决，但是我不断收到错误消息，告诉我act()用于组件更新。

我尝试了act()许多方法，但无济于事。我试过用axiosfetch 代替，并使用酶浅和react-test-library的渲染，但是似乎没有任何效果。

组件：

import axios from 'axios'
import React, { useEffect, useState } from 'react';

interface ISUB {
  id: number;
  mediaType: {
    digital: boolean;
    print: boolean;
  };
  monthlyPayment: {
    digital: boolean;
    print: boolean;
  };
  singleIssue: {
    digital: boolean;
    print: boolean;
  };
  subscription: {
    digital: boolean;
    print: boolean;
  };
  title: string;
}

interface IDATA extends Array<ISUB> {}

const initData: IDATA = []; …

我在一个名为button-actions的模块中有一个函数,当用户单击后退按钮时会调用该函数.我想直接测试backButtonActions方法,但需要在被调用的backButtonActions中模拟leaveApp和displayById方法.

这是我的button-actions.js文件方法.

export function backButtonActions( label, page ){      //, page
    console.log("LABEL = ", label, "  page = ", page);
    switch( label ){
        case 'step1':
            page.leaveApp();
            break;
        case 'step2':
            page.displayById();
            break;
    }
}

我是测试的新手,所以我可能会遗漏一些非常简单的东西.下面是我的test.js文件

   window.$ = require('jquery');
    import {backButtonActions} from '../button-actions';


    describe('Button Actions', () => {

        const page = {}

        beforeEach(() => {

            page.leaveApp = jest.fn(() => "leave");
            page.displayById = jest.fn(() => "Display");

            document.body.innerHTML =
                '<div>' +
                '  <button class="btn-back" />' +
                '</div>';

                 $('.btn-back').click((event, label) =>{
                     backButtonActions( …

• 反应:16.3.0-alpha.1
• 开玩笑:"22.3.0"
• 酶:3.3.0
• 打字稿:2.7.1

码:

class Foo extends React.PureComponent<undefined,undefined>{
   bar:number;
   async componentDidMount() {
     this.bar = 0;
     let echarts = await import('echarts'); // async import
     this.bar = 100;
   }
}

测试:

describe('...', () => {
  test('...', async () => {
    const wrapper = shallow(<Foo/>);
    const instance = await wrapper.instance();
    expect(instance.bar).toBe(100);
  });
});

错误:

Expected value to be:
  100
Received:
  0

使用 Jest 对一些 NodeJS 函数进行一些测试，但它不喜欢import语句，例如import DatabaseController from '../util/database-controller'.

我做了一些阅读，人们建议安装babel-jest和更新我的配置（如下），但我没有任何运气。我错过了什么？据我所知，它不理解import陈述，因为它是一es6件事......

我的笑话部分package.json：

"jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}"
    ],
    "resolver": "jest-pnp-resolver",
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "testMatch": [
      "<rootDir>/**/__tests__/**/*.{js,jsx}",
      "<rootDir>/**/?(*.)(spec|test).{js,jsx}"
    ],
    "testEnvironment": "jsdom",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.jsx?$": "babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ]
  },

我有一个使用Create-React-App创建的项目.我希望添加一个precommit钩子来运行我们的linter并测试pre-commit包.

"pre-commit": [
  "precommit-msg",
  "lint",
  "test"
],

但是,由于测试脚本默认在监视模式下运行,因此可以防止提交实际发生.如何在预提交中添加不在监视中移动的测试？