首页 文章

为什么这个测试使用Jest&react-test-renderer抛出错误,因为它试图解析.graphql文件?

提问于
浏览
0

我正在尝试运行一个简单的测试来开始使用Jest,它似乎正在解析整个应用程序 . 服务文件引用了引发错误的文件 .

如果我在正则表达式中不包含 graphql moduleNameMapper Jest尝试解析 .graphql 文件本身 .

当解析文件 app-container 时,来自apollo-client的 graphql.js 在尝试解析导入的 .graphql 文件时抛出错误 .

Edit: 如果我使用 gql 内联查询,则会停止这些错误 . 使用导入查询的任何想法?

来自 package.json

"jest": {
    "testEnvironment": "jsdom",
    "transform": {
      "\\.(gql|graphql)$": "jest-transform-graphql",
      ".*": "babel-jest"
    },
    "modulePaths": [
      "<rootDir>/src/modules"
    ],
    "moduleFileExtensions": [
      "js"
    ],
    "moduleNameMapper": {
      "\\.(graphql|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|yml)$": "<rootDir>/src/__mocks__/fileMock.js"
    }
  }

的WebPack-配置:

loaders: [{
            test: /\.(sass|scss|css)$/,
            loader: LOCAL_ENV ? `style!${CSS_LOADERS}` : ExtractTextPlugin.extract(CSS_LOADERS)
        }, {
            test: /\.json$/,
            exclude: /node_modules/,
            loader: 'json'
        }, {
            test: /\.yml$/,
            exclude: /node_modules/,
            loader: 'json!yaml'
        }, {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel'
        }, {
            test: /\.(jpe?g|png|gif)$/,
            exclude: /node_modules/,
            loader: 'url?limit=1000' // 1KB
        }, {
            test: /\.(graphql|gql)$/,
            exclude: /node_modules/,
            loader: 'graphql-tag/loader',
        }]

测试:

import React from 'react';
import { Provider } from 'react-redux';
import renderer from 'react-test-renderer';
import services from 'app-system/services';

test('Component should render with a Provider', () => {
    const component = renderer.create(
        <Provider store={services.reduxStore}>
            <div>This is a test</div>
        </Provider>
    );

    const tree = component.toJSON();
    expect(tree.type).toBe('div');
});

错误:FAIL src / app / tests /store.test.js●测试套件无法运行

TypeError: Cannot read property 'filter' of undefined

      at Object.parser (node_modules/react-apollo/lib/parser.js:12:41)
      at graphql (node_modules/react-apollo/lib/graphql.js:74:30)
      at Object.<anonymous> (src/app/modules/group/components/app-container/index.js:52:52)
      at Object.<anonymous> (src/app/modules/group/components/index.js:1:418)
      at Object.<anonymous> (src/app/modules/team/components/hello/index.js:2:45)
      at Object.<anonymous> (src/app/modules/team/components/index.js:1:378)
      at Object.<anonymous> (src/app/modules/team/index.js:1:209)
      at Object.<anonymous> (src/app/modules/system/register-modals.js:17:57)
      at Object.<anonymous> (src/app/modules/system/services.js:26:49)
      at Object.<anonymous> (src/app/__tests__/store.test.js:4:43)

来自 graphql.js 的第74行:

var operation = parser_1.parser(document);

1 回答

  • 1

    我从我的moduleNameMapper中删除了graphql文件扩展名并且它有效 . 对于遇到类似问题的其他人,请查看上面的问题并使其看起来像:

    "moduleNameMapper": {
          "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|yml)$": "<rootDir>/src/__mocks__/fileMock.js",
          ...
        }
    

相关问题