小编pub*_*orn的帖子

为了100%覆盖我的Saga文件,我正在研究如何测试观察者.

我一直在谷歌搜索,有几个答案如何测试观察者.也就是说,saga是做一个takeEvery或者takeLatest.

但是,所有测试方法似乎都基本上复制了实现.那么编写测试的重点是什么呢？

例:

// saga.js

import { delay } from 'redux-saga'
import { takeEvery, call, put } from 'redux-saga/effects'
import { FETCH_RESULTS, FETCH_COMPLETE } from './actions'

import mockResults from './tests/results.mock'

export function* fetchResults () {
  yield call(delay, 1000)
  yield put({ type: FETCH_COMPLETE, mockResults })
}

export function* watchFetchResults () {
  yield takeEvery(FETCH_RESULTS, fetchResults)
}

测试方法1:

import { takeEvery } from 'redux-saga/effects'
import { watchFetchResults, fetchResults } from '../sagas'
import { FETCH_RESULTS } from '../actions'

describe('watchFetchResults()', …

使用eslint-import-resolver-webpack我试图通过引用"快捷方式"(例如组件/计数器)让eslint知道我想要导入文件.

在下面的示例中,webpack(v2.2.0-rc.3)构建正常,但测试失败,因为它"无法解析模块'组件/计数器'的路径".我也因导入'components/Counter/reducer'而得到此错误,因此它不仅限于索引.

运行npm run lint和我的IDE(IntelliJ)都给出了相同的错误.

按照文档,我设置了以下配置:

(部分)文件结构:

project-root/
  app/
    components/
      Counter/
        index.js
        reducer.js
    app.js
 internals/ 
   config/
      .eslintrc
      webpack.test.js
  package.json

文件:project-root/app/app.js

import Counter from 'components/Counter'
// etc...

摘录:project-root/package.json

...
"lint": "npm run lint:eslint -- . ",
"lint:eslint": "eslint -c internals/config/.eslintrc --fix --ignore-path .gitignore --ignore-pattern internals"
...

文件:project-root/config/.eslintrc

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "env": {
    "browser": true,
    "node": true,
    "mocha": true,
    "es6": true
  },
  "plugins": [
    "redux-saga",
    "react",
    "jsx-a11y"
  ],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true …

使用官方的文档我一直在试图安装使用最佳构建配置：@babel/preset-env和core-js一个.browserslist文件。

据我了解的文档，他们说preset-envwith useBuiltins:"usage"将更新import 'core-js/stable'我的代码中的语句，仅包含必需的功能。

但是，无论我设置last 1 chrome version还是>1% in NL（使用的浏览器都很多，并且版本都比较旧），构建文件的大小都是相同的（大约3MB）。

我想念什么？

我在这里有一个测试仓库：https : //github.com/publicJorn/jorns-react-starter

为了快速参考，相关文件：

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": { "version": 3, "proposals": true }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-object-rest-spread",
      {
        "useBuiltIns": true
      }
    ],
    ["@babel/plugin-proposal-class-properties"],
    ["@babel/plugin-syntax-dynamic-import"],
    ["babel-plugin-styled-components"]
  ]
}

webpack部分

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      } …