针对工作的 GraphQL 后端不工作，使用 Jest 对 Relay 容器进行集成测试

Question

我想针对运行 GraphQL 后端服务器实施我的 Relay 容器的集成测试。为此，我将使用 Jest。我想说的是，React 组件的单元测试在我的 Jest 设置中运行良好。这是我在 package.json 中的 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() 方法似乎根本没有执行。

我运行喜欢这样开玩笑

./node_modules/.bin/jest

这一切都行得通吗？

谢谢。

Answer 1

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

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

缺少的部分是您需要填充 XMLHttpRequest 以使其与 React Native 一起工作。

并且您需要为 React web 填充 fetch

针对工作的 GraphQL 后端不工作，使用 Jest 对 Relay 容器进行集成测试

Integration testing of Relay containers with Jest against a working GraphQL backend not working

integration-testing

jestjs

relayjs

babel-jest