使用正常的GraphQL后端对带有Jest的Relay容器进行集成测试不起作用 [英] Integration testing of Relay containers with Jest against a working GraphQL backend not working

问题描述

我想针对正在运行的GraphQL后端服务器对我的Relay容器进行集成测试.我将为此使用Jest.我想说，React组件的单元测试可以很好地与我的Jest设置一起使用. 这是我在package.json中开玩笑的内容:

I'd like to implement the integration testing of my Relay containers against a running GraphQL backend server. I'm going to use Jest for this. I'd like to say that unit testing of React components works well as expected with my Jest setup. Here's what I have in the 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端点发出请求，以获取一个简单的代表有关当前用户(我")的信息.

Here's the test itself. It must make a request to `http://localhost:10000/q' GraphQL endpoint to fetch a simple piece that represents the info about the current user ('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()方法根本没有执行.

The problem is that the test passes. But in my opinion it must fail at this line inside the render() expect(this.props.root.me.authorities[0].authority).toEqual('ROLE_ANONYMOUS_AAA');. It seems like the render() method is not executed at all.

我正在这样开玩笑

./node_modules/.bin/jest

这一切都应该起作用吗?

Does this all suppose to work at all?

谢谢.

推荐答案

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

This is possible, take a look on the code: https://github.com/sibelius/relay-integration-test

并在我的博客文章中: https://medium.com/entria/relay-integration-test-with-jest-71236fb36d44#.ghhvvbbvl

and on my blog post: https://medium.com/entria/relay-integration-test-with-jest-71236fb36d44#.ghhvvbbvl

缺少的部分是您需要填充XMLHttpRequest才能使其与React Native一起使用.

The missing piece is that you need to polyfill XMLHttpRequest to make it work with React Native.

您需要为React Web进行polyfill提取

And you need to polyfill fetch for React web

这篇关于使用正常的GraphQL后端对带有Jest的Relay容器进行集成测试不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！