开玩笑不预处理我的 JSX [英] Jest not preprocessing my JSX

问题描述

我正在按照 Jest 教程来测试反应组件，并且我的 jsx 遇到了预处理问题.我认为错误是由于预处理造成的，错误消息不是很有帮助.通过包含 /** @jsx React.DOM */ docblock 修复了旧版本的 react/jest，谷歌搜索显示了类似的错误，据我所知已修复.

当我运行测试时:

使用 Jest CLI v0.8.0，jasmine1失败规范/MyComponent_spec.js运行时错误语法错误:/Users/asdf/react/stuff-react/spec/MyComponent_spec.js:意外令牌 (13:6)npm 错误！测试失败.有关更多详细信息，请参见上文.

有问题的那一行是应该渲染我的组件的那一行:

jest.dontMock('../src/MyComponent');让 React = require('react');让 ReactDOM = require('react-dom');让 TestUtils = require('react-addons-test-utils');const MyComponent = require('../src/MyComponent');描述('我的组件'，函数(){它('渲染'，功能(){var myComponent = TestUtils.renderIntoDocument(//这是测试错误中引用的行<我的组件/>)var myComponentNode = ReactDOM.findDOMNode(myComponent);期望(myComponentNode.textContent).toEqual('hi');});});

我以为我的 package.json 负责告诉 jest 预处理该文件?

 "脚本": {测试":开玩笑"},开玩笑":{"testDirectoryName": "规格","scriptPreprocessor": "/node_modules/babel-jest",unmockedModulePathPatterns":["/node_modules/react","/node_modules/react-dom","/node_modules/react-addons-test-utils",/node_modules/fbjs"]},

我的组件:

从'react'导入React；class MyComponent 扩展了 React.Component({使成为 () {返回 (<div>你好

)}});导出默认的 MyComponent；

解决方案

使用项目根目录中的 .bablerc 文件为我修复了它.

我在开发时没有使用 .babelrc 文件，因为我在 webpack 配置文件中定义了我的预设.但事实证明，当你用 jest 运行单元测试时，jest 并不知道这个预设，因为它不知道 webpack.因此，只需添加一个带有预设的 .babelrc 文件也可以为您解决问题.

.babelrc 的内容:

<代码>{预设":[es2015"，反应"]}

I am following the Jest tutorial to test a react component and am running into preprocessing issues with my jsx. I assume the error is due to preprocessing, the error message is not very helpful. Googling shows similar errors with older versions of react/jest that were fixed by including the /** @jsx React.DOM */ docblock which as far as I can tell was fixed.

When I run my test:

Using Jest CLI v0.8.0, jasmine1
 FAIL  spec/MyComponent_spec.js
Runtime Error
SyntaxError: /Users/asdf/react/stuff-react/spec/MyComponent_spec.js: Unexpected token (13:6)
npm ERR! Test failed.  See above for more details.

The line in question is the one that should be rendering my component:

jest.dontMock('../src/MyComponent');

let React = require('react');
let ReactDOM = require('react-dom');
let TestUtils = require('react-addons-test-utils');

const MyComponent = require('../src/MyComponent');

describe('MyComponent', function(){
  it('render', function(){

    var myComponent = TestUtils.renderIntoDocument(
      // This is the line referenced in the test error
      <MyComponent />
    )
    var myComponentNode = ReactDOM.findDOMNode(myComponent);

    expect(myComponentNode.textContent).toEqual('hi');
  });
});

I thought my package.json was responsible for telling jest to preprocess that file?

 "scripts": {
    "test": "jest"
  },
  "jest": {
    "testDirectoryName": "spec",
    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react",
      "<rootDir>/node_modules/react-dom",
      "<rootDir>/node_modules/react-addons-test-utils",
      "<rootDir>/node_modules/fbjs"
    ]
  },

My component:

import React from 'react';

class MyComponent extends React.Component({
  render () {
    return (
      <div>
        hi
      </div>
    )
  }
});

export default MyComponent;

解决方案

Using a .bablerc file in the project root directory fixed it for me.

I was not using a .babelrc file while developing because I defined my presets in the webpack configuration file. But it turns out that when you run the unit test with jest, then jest is not aware of this presets as it does not know about webpack. So simply adding a .babelrc file with the presets should solve the issue for you too.

Contents of .babelrc:

{ "presets": ["es2015", "react"] }

这篇关于开玩笑不预处理我的 JSX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！