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

Posted 2023-02-22

【中文标题】如何使用 facebook jest 测试 .jsx 文件，找不到模块

【英文标题】：how to use facebook jest to test .jsx file, module can not be found

【发布时间】：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 一起工作？

谢谢

【参考方案1】：

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

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

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