小编Jua*_*vas的帖子

我正在尝试使用 Jest 获取单个 Vue 组件的代码覆盖率数字。

假设我的组件是/var/www/html/path/to/Component.vue，其相应的单元测试文件是/var/www/html/path/to/tests/unit/Component.spec.js

在我的package.json我有以下脚本：

"scripts": {
    "test": "jest --no-cache"
}

当我运行 Jest 以仅覆盖我的组件时，如下所示：

"scripts": {
    "test": "jest --no-cache"
}

我得到零代码覆盖率数字：

=============================== Coverage summary ===============================
Statements   : Unknown% ( 0/0 )
Branches     : Unknown% ( 0/0 )
Functions    : Unknown% ( 0/0 )
Lines        : Unknown% ( 0/0 )
================================================================================
Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        4.019s

为什么我会得到这个结果，我怎样才能通过 npm 从 Jest 获得真实的代码覆盖率统计数据？

对于包含以下内容的源代码

 const S3 = require('aws-sdk/s3/clients')
 const s3 = new S3()
 s3.putObject(params, callback)

我基于这篇文章添加了以下模拟:

 jest.mock('aws-sdk/s3/clients')
 const S3 = require('aws-sdk/s3/clients')

 it('has to mock S3#putObject', () => { 
    S3.prototype.putObject.mockImplementation(() => cb()) 
 })

但我无法找到S3.prototype.putObject有/无嘲弄,因为api似乎在这里的apiLoader模式中构建不同.但是,这里的定义似乎完全不同

我也尝试过:

  const AWS = require('aws-sdk')
  console.log(AWS.S3.prototype.putObject) // undefined

如果我在原型上找不到它,我怎么能模拟一个方法呢？

在承诺中包装打破了结果

我已将源代码包装在Promise中,如下所示:

new Promise((resolve, reject) => {
    s3.putObject(params, (err, data) => {
        if (err) {
            reject(err)
        } else {
           resolve(data)
       }
    })
})

并使用如下所示的测试:

const mockedPutObject = jest.fn();
jest.mock('aws-sdk/s3/clients', () => …

我正在尝试对登录组件进行单元测试，该组件包括一个带有来自库https://react.semantic-ui.com/的按钮的表单，该组件是这样的：

<LoginComponent onSubmit={onSubmit} data={req.data} />

我目前的测试是这样的：

import React from 'react';
import { mount, configure } from 'enzyme';
import { Button } from 'semantic-ui-react';
import LoginComponent from './LoginComponent';
import Adapter from 'enzyme-adapter-react-16';

configure({adapter: new Adapter()});

it('Email check', () => {
    const wrapper = mount(<LoginComponent data={undefined} onSubmit={ console.log("submitted" }/>);
    console.log(wrapper.find(Button));
})

控制台日志返回 ReactWrapper {} 编辑

这是 loginComponent 的源代码是：

import React, {useEffect} from 'react'
import useForm from 'react-hook-form'
import { Grid, Message, Card, Input, Button, Form, Image } from 'semantic-ui-react'
import …

我最初在使用 create-react-app 时遇到了这个问题，所以我只是开玩笑地做了一些简单的设置：

1. 创建了新目录
2. 该目录中的纱线初始化
3. 纱线加玩笑

4. 创建了新文件 sum.js：

      function sum(a, b) {
         return a + b;
      }
      module.exports = sum;
   

   Run Code Online (Sandbox Code Playgroud)

5. 创建文件以测试上述功能

   const sum = require('./sum');
   
   test('adds 1 + 2 = 3' , () => {
       expect(sum(1,2)).toBe(3);
   });
   

   Run Code Online (Sandbox Code Playgroud)

6. 添加到 package.json：

   "scripts": {
   "test": "jest"
   

   Run Code Online (Sandbox Code Playgroud)

   },

但是当我运行 yarn test 时，我得到了这个：

terry@terry-sharewalker:~/myProjects/test-jest$ yarn jest
yarn run v1.13.0
$ /home/terry/myProjects/test-jest/node_modules/.bin/jest

从那里什么也没有发生。它只是挂起。从 create-react-app 运行测试也发生了同样的事情。react-scripts 测试会显示，然后什么都没有。

这是我得到的：

Jest "^24.5.0"
Ubuntu 16.04
yarn 1.13.0
watchman 4.9.0
node 10.15.3

我已经重新安装并升级了我能想到的所有东西，包括 npm、node、watchman、linuxbrew、yarn。如果有人能帮助我，我将永远感激不尽！！

我正在一个反应​​代码库中工作，我们在其中标记了测试文件

__tests__

里面的文件是这样的

文件名.js

以前当我使用 jest/enzyme 时，我的测试文件格式如下

文件名.test.js

我假设当你把一个文件放在一个带有标题的文件夹中时

__tests__ 

你可以离开 .test 部分吗？我似乎无法找到有关主题的可靠答案。有没有人对格式化功能有一些了解？

我已经在一个有角度的项目中用笑话有效地替换了业力/茉莉花，并且测试运行得很好......但是：

我没有删除茉莉花（量角器需要它），现在我遇到了一个问题，如果我在规范文件中使用它spyOn，jest.spyOn它会使用茉莉花间谍而不是笑话间谍（它们的实现方式不同）。这是一种糟糕的开发人员体验，我想从我的单元测试中完全删除 jasmine，但我不知道如何做。

如何设置 tsconfig.spec.json 在编译规范文件期间排除 jasmine？

我正在使用jest-preset-angularwhich use ts-jest.

如果我没有提供足够的信息，请随时骚扰我以获取更多信息！

这是我的tsconfig.spec.json文件：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "module": "commonjs",
    "target": "es5",
    "baseUrl": ""
  },
  "files": [
    "test.ts",
    "polyfills.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

这是我的tsconfig.json文件：

{
  "compileOnSave": false,
  "compilerOptions": {
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "baseUrl": "public",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types" <-- jasmine types are in …

我有一个静态方法来创建自定义事件并分派它：

    class MyComponent extends {
       static refreshComponent() {
         const event = new Event('refreshComponent');
         document.dispatchEvent(event);
       }
       render() {
          MyComponent.refreshComponent();
       }
    }

我正在尝试如下测试：

describe('refreshComponent', () => {
    it('should dispatch an event', () => {
      const document = { dispatchEvent: jest.fn() };
      wrapper.refreshGoalsComponent();
      expect(document.dispatchEvent).toHaveBeenCalledWith('refreshComponent');
    });
  });

但这里没有调用dispatchEvent，因为没有“new Event()”的模拟。有办法嘲笑它吗？请帮忙