小编And*_*rle的帖子

使用笑话运行简单的组件测试时，出现以下错误。

FAIL  src/components/header/Header.test.tsx
  ? Test suite failed to run

    /Volumes/WorkSpace/Projects/wc2/src/components/header/Header.scss:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){@import "../../styles/variables";
                                                                                             ^
    SyntaxError: Invalid or unexpected token

      at ScriptTransformer._transformAndBuildScript (../../../../Users/micahblu/.nvm/versions/node/v7.2.0/lib/node_modules/jest/node_modules/je
st-runtime/build/ScriptTransformer.js:289:17)
      at Object.<anonymous> (src/components/header/Header.tsx:2:1)

该组件导入header.scss。原始错误抱怨我在文件开头有@import语句，但甚至删除它也抱怨“。”。在CSS类声明的开头。显然对CSS根本不起作用？还是scss？我拥有适用于css和sass的所有适当的babel加载程序，并且它们在开发中运行良好，我认为babel-jest应该了解如何处理文件。

在我的package.json中，我有：

"jest": {
    "transform": {
      "^.+\\.(tsx|ts)?$": "typescript-babel-jest"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json"
    ]
  }

Header.test.tsx

import React from 'react'
import renderer from 'react-test-renderer'
import Header from './Header'

test('output', () => {
  const component = renderer.create(<Header />)
  expect(component).toMatchSnapshot()
})

头文件

import React from 'react'
import { Link } from 'react-redux-router'
import …

我有很多代码传递 HTML 5 文件对象。我为它编写了一套测试，但是，由于文件对象的上次修改日期，它破坏了我的快照测试。

我尝试使用以下方式进行模拟：

jest.mock('File', () => {
    return class MockFile {
        filename: string;

        constructor(parts: (string | Blob | ArrayBuffer | ArrayBufferView)[], filename: string, properties?: FilePropertyBag) {
            this.filename = filename;
        }
    }
});

我收到错误消息，提示找不到文件模块（我不需要在使用它的任何地方导入它......）

我还尝试扩展文件类并覆盖 lastmodified get 属性，但它似乎并没有修复我的快照。

处理这个问题的最佳方法是什么？

我正在尝试开玩笑地更新我的组件的状态。

我想要做的是检查当状态值updated设置为true然后新道具不应该改变状态的值。从我在这里阅读的答案中，我假设我可以执行以下操作来更新组件的状态。

Game.setState({
    updated: true
});

下面是我的代码。

const props = {
  goals: "0"
};

it("should should not update the state of goals when the value prop is changed if updated value in state is set to true", () => {
    renderer.render(<Game {...props} />, div);

    Game.setState({
        updated: true
    });

    Game.componentWillReceiveProps({
        goals: "2"
    });

    expect(Game.state.goals).toBe("0");    
});

我是测试 axios 调用的初学者并开始使用 axios-mock-adapter，但我不明白为什么我们使用 axios-mock-adapter。

mock.onPost('/api').reply(200, userData, headers);

在这个代码片段中，请求是真的发送到服务器还是只是一个模拟？

因为如果我提供错误的凭据，它会以 200 状态响应，因为我在“回复”中识别它以返回 200。

那么如果我确定了响应状态，使用它的原因是什么？如果它真的不去服务器，这似乎是没有用的。

也许我错过了一些我不知道的东西，因为我是新手，但应该有人把这个问题放在我的脑海里。

我是开玩笑的新手，并且无法确定如何测试嵌套在 Promise 中的结果。具体来说：

myMethod: function (e) {
  let self = this
  self.resetErrors()

  Parser.parseFile(this.form.uploadFile).then(res => {
    const hasErrors = self.validFile(res)
    if (!hasErrors) {
      self.processFile(res)
    }
  })
}

我想测试以确保，假设hasErrors是错误的， self.processFile火灾。这是我目前（失败的）最大努力：

describe("if the provided data is valid", () => {
  it('runs processFile', () => {
    const mockProcessFile = jest.fn()
    mockParser = jest.fn(() => {
      new Promise((resolve, reject) => {
        return ValidMockData
      }).then((loanData) => {
        expect(mockProcessFile).toBeCalled()
      })
    })

    CsvParser.parseFile = mockParser

    wrapper.vm.validFile = jest.fn(true)
    wrapper.vm.processFile = mockProcessFile
    wrapper.vm.store().resolve((data) => {
      expect(mockProcessFile).toBeCalled() …

我还是单元测试的新手，我很难理解如何测试/模拟来自路由器的推送，

<Tab label="Members" alt="Members" onClick={() => Router.push('/members')}/>

上面这行是我需要测试的，但我怎么能呢？我会创建一个假端点然后测试 onClick 吗？

我有这样的数据结构，顺序可以是随机的

const table = [
  ['A', 'a', 0],
  ['A', 'a', 1],
  ['A', 'b', 0],
  ['B', 'a', 0],
  ['B', 'b', 1],
  ['B', 'b', 0],
]

这应该像这样在 html 中呈现为分层表

<table>
  <tr><td rowspan="3">A</td><td rowspan="2">a</td><td>0</td></tr>
  <tr><td>1</td></tr>
  <tr><td>b</td><td>0</td></tr>
  <tr><td rowspan="3">B</td><td>a</td><td>0</td></tr>
  <tr><td rowspan="2">b</td><td>0</td></tr>
  <tr><td>1</td></tr>
</table>

我想知道什么是解决这个问题的有效方法。考虑过将列表转换为树，然后再转换回列表，但我不确定这是解决此问题的最佳方法。

我不太确定我是否应该在这里提出这个问题.我想做一个艺术项目.我想使用语音作为输入,将图像作为输出.图像随声音而变化.

我怎么能意识到这一点？因为我需要实时或50毫秒以下的延迟.起初我认为使用微控制器会更好.但我想计算巨大的图像,也许我的微控制器无法做到这一点.例如,我想计算10.000个移动物体.我可以用windows/linux/mircocontroller实现这个吗？

如果我可以使用Python,那将是非常好的.或者你处理的东西是更好的选择吗？

你需要更多细节吗？

为什么不<span>包含在悬停工作<tr>的<table>？

这是一个例子:

HTML

<p>
    <table>
        <tr><td>
            <a>HOVER</td></tr><span><tr><td>child</td></tr></span></a>
       <tr><td> <span>immediate sibling</span>
           <span>general sibling</span></tr></td>
        </tr>
    </table>
</p>

CSS

p { font-size:20px; margin:20px; cursor:default; }
a { color:blue; border:3px solid blue; }
span { background:#ccc; }

span:hover { background:yellow; }

http://jsfiddle.net/UAHw7/22/

当有人点击我的价格上涨按钮时,我希望价格在#priceInput框中增加.1.这只是不起作用..我做错了什么？

$("#priceUp").click(function(){ 
    var xyz = parseInt($("#priceInput").val());
    xyz=(xyz+.1);
    $("#priceInput").val(xyz);
});

我在寻找一个JavaScript正则表达式,将取代i中sin(i/20*i)而不是在i中sin.在这种情况下,使用(\W)i将永远给我(i.

我正在上一堂关于React的课程，在我的第一个测试中开玩笑之后，似乎应该在创建我的快照，但是它没有说它有快照，并且我没有看到快照文件。

当我更改组件中的内容并再次运行Jest时，它不会像我期望的那样失败。我只是jest从命令行运行，它可以找到测试，但是无论我如何更改组件，它总是可以通过。（我假设是因为它没有创建要进行比较的快照？）

我可能做错了什么？

这是测试：

import React from 'react'
import Search from './Search'
import renderer from 'react-test-renderer'

test('Search snapshot test', () => {
  const component = renderer.create(<Search />)
  const tree = component.toJSON()
  expect(tree).toMatchSnapshot
})

我是TDD的新手,我想在Age组件中测试我的回调函数:我的Age.js文件如下:

import React, { Component } from "react";
import { connect } from "react-redux";
import actions from "../../actions";
import TextFieldComponent from "../Module/TextFieldComponent";

export class Age extends Component {

  ageValueCallBack = age => {
    console.log("value is : ", age);
    this.props.selectAgeAction(age)
  };

  render() {
    const props = {
      onChange: this.ageValueCallBack,
      hintText : 'Eg. 25',
      floatingLabelText: "Age(Years)",
      value : (this.props.usersData) ? this.props.usersData.basic.age : null
    };
    return <TextFieldComponent {...props} />;
  }
}

function mapStateToProps({ usersData }) {
  return {
    usersData
  };
} …