如何使用 facebook jest 测试 .jsx 文件，找不到模块答案

【问题标题】：how to use facebook jest to test .jsx file, module can not be found如何使用 facebook jest 测试 .jsx 文件，找不到模块
【发布时间】：2016-10-05 06:26:58
【问题描述】：

我正在点击这个链接来检查如何使用 jest 来测试 React 代码： https://facebook.github.io/jest/docs/tutorial-react.html

在我想测试我们当前的组件之前，一切都已找到。 Out 组件是这样写的：

let React = require('react');
var CheckboxWithLabel =  React.createClass({
    getInitialState: function() {
        return {
            isChecked: false
        }
    },
    onChange: function(){
        this.setState({isChecked: !this.state.isChecked});
    },
    render: function(){
        return (
                 <label>
                    <input
                      type="checkbox"
                      checked={this.state.isChecked}
                      onChange={this.onChange}
                    />
                    {this.state.isChecked ? this.props.labelOn : this.props.labelOff}
                  </label>  
        )
    }
});
module.exports = CheckboxWithLabel;

这和教程里面的javasrcript版本几乎一样，只是我把它改成了babel格式。现在，如果我使用这个：

jest.unmock("../CheckboxWithLabel");

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import CheckboxWithLabel from '../CheckboxWithLabel';

describe('CheckboxWithLabel', ()=>{
    it('change the text after click', ()=>{
         // Render a checkbox with label in the document
        const checkbox = TestUtils.renderIntoDocument(
          <CheckboxWithLabel labelOn="On" labelOff="Off" />
        );
        const checkboxNode = ReactDOM.findDOMNode(checkbox);
     // Verify that it's Off by default
        expect(checkboxNode.textContent).toEqual('Off');

        // Simulate a click and verify that it is now On
        TestUtils.Simulate.change(
          TestUtils.findRenderedDOMComponentWithTag(checkbox, 'input')
        );
        expect(checkboxNode.textContent).toEqual('On');
    });
});

我遇到了这个异常：

Using Jest CLI v12.1.1, jasmine2, babel-jest
 FAIL  __tests__/checkboxWithLabel-test.js
● Runtime Error
  - Error: Cannot find module '../CheckboxWithLabel' from 'checkboxWithLabel-test.js'
        at Resolver.resolveModule (node_modules/jest-cli/node_modules/jest-resolve/src/index.js:117:17)
        at Object.<anonymous> (__tests__/checkboxWithLabel-test.js:1:162)

这是 package.json：

{
  "dependencies": {
    "react": "~0.14.0",
    "react-dom": "~0.14.0"
  },
  "devDependencies": {
    "babel-core": "^6.9.0",
    "babel-jest": "^9.0.0",
    "babel-polyfill": "*",
    "babel-preset-es2015": "*",
    "babel-preset-react": "*",
    "jest-cli": "*",
    "react-addons-test-utils": "~0.14.0"
  },
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react/",
      "<rootDir>/node_modules/react-dom/",
      "<rootDir>/node_modules/react-addons-test-utils/"
    ]
  }
}

.babelrc 是这样的：

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

因为我们当前的大部分代码都是用 .jsx 格式编写的，使用的是对象样式，而不是类样式，我怎样才能使它与 jest 一起工作？

谢谢

【问题讨论】：

标签： reactjs ecmascript-6 jestjs

【解决方案1】：

您需要在笑话选项中进行额外设置：

"jest": {
  "moduleFileExtensions": [
    "js",
    "jsx"
  ],
}

这将允许 jest 测试带有 .js 和 .jsx 扩展名的文件

【讨论】：