用Jest对不能工作的GraphQL后端进行继电容器集成测试

Question

我想在运行的GraphQL后端服务器上实现中继容器的集成测试。我要用Jest来做这个。我想说的是，反应组件的单元测试与我的Jest安装程序一样工作良好。下面是我在“package.json for the Jest”中的内容：

"jest": {
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules",
      "src"
    ],
    "moduleNameMapper": {
      "^.+\\.(css|less)$": "<rootDir>/src/styleMock.js",
      "^.+\\.(gif|ttf|eot|svg|png)$": "<rootDir>/src/fileMock.js"
    },
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react/",
      "<rootDir>/node_modules/react-dom/",
      "<rootDir>/node_modules/react-addons-test-utils/",
      "<rootDir>/node_modules/react-relay/"
    ]
}

下面是我正在使用的.babelrc：

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["./babelRelayPlugin.js"]
}

这是测试本身。它必须向‘http://localhost:10000/q’GraphQL端点发出请求，以获取表示当前用户('me')的信息的简单片段。

jest.disableAutomock();

import React from 'react';
import Relay from 'react-relay';
import TestUtils from 'react-addons-test-utils';
import RelayNetworkDebug from 'react-relay/lib/RelayNetworkDebug';

RelayNetworkDebug.init();
Relay.injectNetworkLayer(
  new Relay.DefaultNetworkLayer('http://localhost:10000/q')
);

describe('Me', () => {
  it('can make request to /q anyway', () => {
    class RootRoute extends Relay.Route {
      static queries = {
        root: (Component) => Relay.QL`
            query {
                root {
                    ${Component.getFragment('root')}
                }
            }
        `,
      };

      static routeName = 'RootRoute';
    }

    class AppRoot extends React.Component {
      static propTypes = {
        root: React.PropTypes.object,
      };

      render() {
        expect(this.props.root).not.toBe(null);
        expect(this.props.root.me).not.toBe(null);
        expect(this.props.root.me.firstName).not.toBe(null);
        expect(this.props.root.me.authorities[0]).not.toBe(null);
        expect(this.props.root.me.authorities[0].authority).toEqual('ROLE_ANONYMOUS_AAA');

        return (
          <div>
            {this.props.root.me.firstName}
          </div>
        );
      }
    }

    const AppContainer = Relay.createContainer(AppRoot, {
      fragments: {
        root: () => Relay.QL`
            fragment on Root {
                me {
                    firstName
                    email
                    authorities {
                        authority
                    }
                }
            }
        `,
      },
    });

    const container = TestUtils.renderIntoDocument(
      <div>
        <Relay.RootContainer Component={AppContainer} route={new RootRoute()} />
      </div>
    );

    expect(container).not.toBe(null);
  });
});

问题是测试通过了。但在我看来，在render() expect(this.props.root.me.authorities[0].authority).toEqual('ROLE_ANONYMOUS_AAA');中的这一行肯定会失败。似乎根本没有执行render()方法。

我像这样运行着Jest

./node_modules/.bin/jest

这一切都应该有效吗？

谢谢。

Answer 1

这是可能的，看看代码：https://github.com/sibelius/relay-integration-test

在我的博客上：https://medium.com/entria/relay-integration-test-with-jest-71236fb36d44#.ghhvvbbvl

缺少的部分是，您需要多填充XMLHttpRequest，以使它与本机反应工作。

而且您需要为React进行填充。