React jest shallowRender getRenderOutput 返回 null

Question

我一直在研究 React，我尝试用 shallowRender 进行一个玩笑测试，但总是在 shallowRenderer.getRenderOutput() 上返回 null

MyComponent.react.js

import React from 'react';

export default class MyComponent extends React.Component {
  render() {
    return <div>Hello World!</div>;
  }
}

__test__/MyComponent.react.js

jest.dontMock('../MyComponent.react.js');

import React from 'react/addons';
import MyComponent from '../MyComponent.react.js';

var TestUtils = React.addons.TestUtils;

describe('MyComponent', () => {

  it('test', () => {
    let shallowRenderer = TestUtils.createRenderer();
    shallowRenderer.render(<MyComponent/>);
    let vdom = shallowRenderer.getRenderOutput();

    console.log(vdom);
    expect(1).toEqual(1);
  });
});

npm 测试

> jest-test@1.0.0 test /home/bruno/Stuffs/jest-test
> jest

Using Jest CLI v0.5.8
 PASS  __tests__/MyComponent.js (0.897s)
null
1 test passed (1 total)
Run time: 1.189s

package.json

{
  ...
  "scripts": {
    "test": "jest"
  },
  "devDependencies": {
    "babel": "^5.8.23",
    "babel-jest": "^5.3.0",
    "jest-cli": "^0.5.8",
    "react": "^0.13.3",
    "skin-deep": "^0.6.1"
  },
  "jest": {
    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
    "testFileExtensions": [
      "es6",
      "js"
    ],
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react"
    ],
    "moduleFileExtensions": [
      "js",
      "json",
      "es6"
    ]
  }
}

Answer 1

自动模拟功能不适用于 ES2015 导入，因此，如果您将 MyComponent 导入更改为 require 语句，您的代码应该可以工作。

这是Github issue。

jest.dontMock('../MyComponent.react.js');

import React from 'react/addons';
const MyComponent require('../MyComponent.react.js');    // This is the important line!!

var TestUtils = React.addons.TestUtils;

describe('MyComponent', () => {

  it('test', () => {
    let shallowRenderer = TestUtils.createRenderer();
    shallowRenderer.render(<MyComponent/>);
    let vdom = shallowRenderer.getRenderOutput();

    console.log(vdom);
    expect(1).toEqual(1);
  });
});