2

我一直在我的组件上使用 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
}
4

0 回答 0