使用 Jest 对 Relay 容器的集成测试与工作中的 GraphQL 后端不工作

Posted 2023-03-08

【中文标题】使用 Jest 对 Relay 容器的集成测试与工作中的 GraphQL 后端不工作

【英文标题】：Integration testing of Relay containers with Jest against a working GraphQL backend not working

【发布时间】：2016-11-14 14:38:11

【问题描述】：

我想针对正在运行的 GraphQL 后端服务器对我的 Relay 容器进行集成测试。我将为此使用 Jest。我想说的是，React 组件的单元测试在我的 Jest 设置中运行良好。 以下是我在 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);
  );
);

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

我正在像这样运行 Jest

./node_modules/.bin/jest

这一切都假设有效吗？

谢谢。

【问题讨论】：

您是否尝试过调试以确定容器最终是什么？文档说您在加载反应时需要一个可用的 DOM，您使用的是什么 DOM？ facebook.github.io/react/docs/…

@brysgo 我正在使用 Jest。它在内部使用 jsdom。就像这里回答的一样***.com/questions/33383146/…。我再说一遍，简单的 React 组件的测试按预期工作，并按照 Jest 的教程进行。但是我在问题中显示的 Relay 测试没有按预期工作。

【参考方案1】：

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

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

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

你需要为 React web 进行 polyfill fetch