Question

我一直在我的组件上使用graphql装饰器（通过react-apollo），并试图让我的代码更干，我决定将graphql函数包装在另一个装饰器中，如下所示：

import { graphql } from 'react-apollo'

export default function wrappedQuery(gqlDocument, numberOfItems) {
    return (component) => graphql(gqlDocument, {
        options: ...
        props: ...
    })(component)
}

令人高兴的是，当我像这样使用它时，这在浏览器中有效：

import React from 'react'
import wrappedQuery from './wrappedQuery'
import gqlDocument from './allPosts.graphql'

@wrappedQuery(gqlDocument, 10)
export default class BlogPostContainer extends React.Component {
    ...
}

但是，当我尝试使用Jest运行测试时，任何导入此类的测试都会返回指向BlogPostContainer类声明的错误

Test suite failed to run

TypeError: Cannot read property 'default' of undefined

    at App (src/index.js:10:31)
        at Object.<anonymous>(src/pages/BlogPage/containers/BlogPostContainer/index.js:13:53)

当我用相同的graphql装饰器替换wrappedQuery时，测试运行正常。但是由于这个查询函数长达15行并且可能在许多类之间发生变化，因此它并不理想。就像我说的，wrappedQuery正在浏览器中工作。也许这是一个jsdom问题？我没有足够的经验知道这个问题是关于Jest，还是babel-jest，或jsdom，还是其他什么......

// Works in browser and in Jest

@graphql(gqlDocument, {
    options: ...
    props: ...
}
export default class BlogPostContainer extends React.Component {
    ...
}

我也试图像没有transform-decorators插件一样使用该函数，但是我遇到了同样的问题

// Works in browser but not in Jest

class BlogPostContainer extends React.Component {
    ...
}
export default wrappedQuery(gqlDocument, 10)(BlogPostContainer)

以下是我的配置文件：

// jest.config.js

module.exports = {
  moduleFileExtensions: [ 'js' ],
  moduleDirectories: [ 'node_modules' ],
  moduleNameMapper: {
    '^src/': '<rootDir>/src'
  },
  transform: {
    '\\.(gql|graphql)$': 'jest-transform-graphql',
    '^.+\\.js$': 'babel-jest'
  }
}

// .babelrc

{
  "presets": [
    [ "env", {
      "targets": {
        "browsers": [
          "last 2 versions"
        ]
      },
      "useBuiltIns": "usage",
      "debug": true
    }],
    "stage-0",
    "react"
  ],
  "sourceMaps": true
}

解析返回另一个装饰器的装饰器时，Jest停止

0 个答案: