Question

我一直在研究React，我尝试使用shallowRender进行一次jest测试但是总是在shallowRenderer.getRenderOutput（）上返回null

MyComponent.react.js

import React from 'react';

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

__测试__ / 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 test

> 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);
  });
});

反应jest shallowRender getRenderOutput返回null

1 个答案: