小编Chr*_*ris的帖子

我想测试一个React类组件.

假设我的班级中有一个方法可以根据当前状态和道具来计算某些东西.

import Component from './Component'

const wrapper = enzyme.shallow(<Component {...props} />);

it('does something', () => {
  expect(wrapper.instance().someInstanceMethod(input)).toBe(true);
});

打字稿说Property 'someInstanceMethod' is not defined on type Component<any, any>.我如何告诉Typscript我的班级是如何看的以及它有什么方法？

这有一个很好的例子吗？

在我的React项目中,我在webpack配置中定义了一个模块别名.我想开始转向Typescript.

//我试图尽可能地简化设置

这是我tsconfig.json在根文件夹中的:

{
  "compilerOptions": {
    "target": "es6",
    "module": "es6",
    "moduleResolution": "node",
    "jsx": "react",
    "noImplicitAny": true,
    "strictNullChecks": true,
    "sourceMap": true,
    "lib": [
      "dom",
      "es2015",
      "es2016"
    ],
    "baseUrl": "./src",
    "paths": {
      "app": ["./app"]
    }
  },
  "include": [
    "src/**/*"
  ]
}

这是我的项目结构:

[rootDir]
|
|- [src]
|  |
|  |-[app]
|    |
|    |-[components]
|      | ... react components live here
|      |- Test.tsx
|      |- SomeComponent.tsx
|      |- index.js (export { default as Test } from './Test')
|
|- …

（我使用的是带有 ES6 语法的 JSX）

这有效：

render() {
  return (
    <div style={{ width: '95%' }}></div>
  )
}

这不起作用：（为什么不呢？）编辑：它确实有效

render() {
  return (
    <div style={{ width: this.props.progress + '%' }}></div>
  )
}

编辑：

它有效，但样式值必须是有效值，否则将返回错误。

我使用状态创建样式对象并在构造函数中使用正则表达式清除属性，因此不会因为无效值而再次出错。这是我的解决方案：

import React, { Component, PropTypes } from 'react'

export default class ProgressBar extends Component {
  constructor(props) {
    super(props)
    let progress = +props.progress.replace(/[^0-9]/g, '') || 50
    this.state = {
      style: {
        width: progress + '%'
      }
    }
  }

  render() {
    return (
    ...
      <div className="progress-bar" role="progressbar" aria-valuenow={ …

我想在我的Express App的API路线上运行测试.我使用Mongoose和它的数据库操作架构.这是我的测试设置(它首先成功运行,但在重新加载时失败...):

const request = require('supertest');
// this loads the whole express app
const app = require('../../server');

describe('[Auth]', function () {
  it('returns 401 with invalid credentials', function (done) {
    request(app)
      .post('/auth/login')
      .field('email', 'invalidMail')
      .field('password', 'invalidPassword')
      .expect('Content-Type', contentType)
      .expect(401, done);
  }
}

当我启动mocha时,此测试成功.我启动它,--watch mode每当我保存文件和摩卡重新启动测试我得到以下错误:

MongooseError: Cannot overwrite `user` model once compiled.
    at Mongoose.model (...\node_modules\mongoose\lib\index.js:376:13)
    ...

我尝试的是连接和断开before和after钩子中的Mongoose,但这并没有改变任何东西.

在我看来,Mocha只是在不停止它的情况下重新加载我的应用程序.我在这里错过了什么？什么是最佳做法？

假设您有一个简单的应用程序组件，其中有一个按钮可以使用 vuex 存储从计数器组件添加多个计数器。

这是 webpackbin 上的全部内容。

有点像vuex git repo 中的基本计数器示例。但是你想使用 vuex getter 和通过组件上的属性传递的 ID，你会怎么做？

getter 必须是一个纯函数，所以你不能使用this.counterId. 官方文档说您必须使用计算属性，但这似乎也不起作用。此代码为 getter 返回 undefined：

import * as actions from './actions'

export default {
    props: ['counterId'],
    vuex: {
        getters: {
            count: state => state.counters[getId]
        },
        actions: actions
    },
    computed: {
        getId() { return this.counterId }
    },
}