Question

我想针对正在运行的GraphQL后端服务器实现我的Relay容器的集成测试。我打算用Jest来做这件事。我想说React组件的单元测试与我的Jest设置一样正常。以下是我在J package.json中所拥有的内容：

"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端点发出请求，以获取一个表示当前用户信息的简单部分（'我'）。

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);
  });
});

问题在于测试通过了。但在我看来，{strong>必须失败在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 Native一起使用。

您需要为React网站进行polyfill fetch

使用Jest对Relay容器进行集成测试，以防止工作的GraphQL后端无法正常工作

1 个答案: