Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

在 jest --coverage 时候会报错 #189

Closed
someok opened this issue Nov 15, 2017 · 13 comments
Closed

在 jest --coverage 时候会报错 #189

someok opened this issue Nov 15, 2017 · 13 comments

Comments

@someok
Copy link

someok commented Nov 15, 2017

单纯 jest 测试的时候正常,但是配合 --coverage 的时候就报错了,后来去掉 import 那部分配置就 OK 了

报错信息类似下面这样的:

    ReferenceError: Input is not defined
      
      at Object.<anonymous> (app/container/admin/request/ValidateModal.js:11:1)
      at Object.<anonymous> (app/container/admin/request/__tests__/ValidateModal.test.js:10:22)
          at Generator.next (<anonymous>)
          at new Promise (<anonymous>)
      at handle (node_modules/worker-farm/lib/child/index.js:44:8)
      at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:51:3)
      at emitTwo (events.js:125:13)
      at process.emit (events.js:213:7)
      at emit (internal/child_process.js:774:12)
      at _combinedTickCallback (internal/process/next_tick.js:141:11)
      at process._tickCallback (internal/process/next_tick.js:180:9)

虽然有个解决办法就是把 import 配置转移到各个 env 下面,但是这样毕竟不够优雅,想知道有没有啥开关可以在 test 部分配置一下?

我的 .babelrc 配置如下:

{
    "presets": [
        [
            "env",
            {
                "modules": false
            }
        ],
        "stage-0",
        "react"
    ],
    "plugins": [
        "transform-decorators-legacy",
        "transform-decorators",
        "lodash",
        [
            "import",
            [
                {
                    "libraryName": "antd",
                    "style": true
                }
            ]
        ]
    ],
    "env": {
        "test": {
            "sourceMap": "inline",
            "plugins": [
                "transform-es2015-modules-commonjs",
                "dynamic-import-node"
            ]
        },
        "devHmr": {
            "plugins": [
                "react-hot-loader/babel"
            ]
        },
        "production": {
            "plugins": [
                [
                    "transform-react-remove-prop-types",
                    {
                        "removeImport": true
                    }
                ]
            ]
        }
    }
}

@pascalduez
Copy link

pascalduez commented Feb 7, 2018

Refs #172

@yesmeck
Copy link
Contributor

yesmeck commented Feb 8, 2018

测试环境其实没必要用这个。

@someok
Copy link
Author

someok commented Feb 8, 2018

对啊,我的意思就是希望有个disable的配置项,只需要在test env下配置一次就行了

@yesmeck
Copy link
Contributor

yesmeck commented Feb 8, 2018

@yesmeck yesmeck closed this as completed Feb 8, 2018
@pascalduez
Copy link

pascalduez commented Feb 8, 2018

Would you mind providing an English explanation please? Might be handy for future references.

Also I would say there's still an issue here, see #172 (comment)
We don't use any env in our babel config.

@yesmeck
Copy link
Contributor

yesmeck commented Feb 8, 2018

@pascalduez Don't use babel-plugin-import in test environment.

@pascalduez
Copy link

@yesmeck Thanks! That also the conclusion I ended up with.

@gameboy08
Copy link

@pascalduez Don't use babel-plugin-import in test environment.

Thanks a lot. After hours of researches, it's the unique answer that saves my life.

@susan-github
Copy link

@kive323 how to disabled babel-plugin-import in test environment?

@susan-github
Copy link

14_27_48__12_07_2018

I have removed the 'import' config in testing environment,but still get 'undefined' error.

@gameboy08
Copy link

@kive323 how to disabled babel-plugin-import in test environment?

Here is my .babelrc config.

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime"
  ],
  "env": {
    "dev": {
      "plugins": [
        [
          "import",
          { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }
        ]
      ]
    },
    "production": {
      "plugins": [
        [
          "import",
          { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }
        ]
      ]
    }
  }
}

I only enable babel-plugin-import in dev and production environment.

@mgcrea
Copy link

mgcrea commented Sep 5, 2019

If you're use a babel.config.js, here is what you can do:

const {NODE_ENV = 'development'} = process.env;
const presets = ['react-app', '@babel/preset-typescript'];
const plugins = [
  [
    'named-asset-import',
    {
      loaderMap: {
        svg: {
          ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]'
        }
      }
    }
  ],
  [
    'module-name-mapper',
    {
      moduleNameMapper: {
        '^src/(.*)': '<rootDir>/src/$1'
      }
    }
  ],
  'react-hot-loader/babel'
];

if (NODE_ENV !== 'test') {
  plugins.push(['import', {libraryName: 'antd', libraryDirectory: 'es', style: 'css'}]);
}

module.exports = {
  presets,
  plugins
};

@davidtong
Copy link

davidtong commented Feb 6, 2020

To disable babel-plugin-import in test:

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ],
  "env": {
    "test": {
      "plugins": [
        ["import", false]
      ],
      ...

This way, you have it enabled by default without explicitly doing it for development and production, and only have it disabled in test env.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants