React.addons.TestUtils.renderIntoDocument 总是 returns 空

Question

我正在学习 Jest 并尝试将单元测试集成到我现有的 ES6 React 应用程序中。出于某种原因，React.addons.TestUtils.renderIntoDocument 总是返回 null。谁能看出我做错了什么？

非常感谢。

package.json

{
  "name": "test.jest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-jest": "^5.2.0",
    "jest-cli": "^0.4.5"
  },
  "dependencies": {
    "react": "^0.13.3"
  },
  "jest": {
    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react"
    ],
    "testFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json"
    ]
  }
}

__tests__/foo-test.jsx

/* global describe, it, expect */

'use strict'

import React from 'react/addons'

const { addons: { TestUtils } } = React

describe('Foo', () => {
  it('is a react element', () => {
    let component = TestUtils.renderIntoDocument(
      <div>foo</div>
    )

    expect(TestUtils.isElement(component)).toBeTruthy()
  })
})

结果

$ npm test

> test.jest@1.0.0 test /home/markus/Desktop/test.jest
> jest

Using Jest CLI v0.4.5
 FAIL  src/__tests__/foo-test.jsx (1.287s)
● Foo › it is a react element
  - Expected false to be truthy.
        at Spec.<anonymous> (/home/markus/Desktop/test.jest/src/__tests__/foo-test.jsx:15:44)
        at Timer.listOnTimeout [as ontimeout] (timers.js:112:15)
1 test failed, 0 tests passed (1 total)
Run time: 1.555s
npm ERR! Test failed.  See above for more details.

更新

但是，ES6 example is also not working. Throws a ton of warnings before failing when it tries to read from a null value. The ES5 example 确实有效。可能是上游 babel-jest 问题？

结果

$ npm test

> @ test /home/markus/Desktop/jest/examples/react-es6
> node ../../bin/jest.js

Using Jest CLI v0.4.5
 FAIL  __tests__/CheckboxWithLabel-test.js (1.697s)
Warning: getDOMNode(...) is deprecated in plain JavaScript React classes. Use React.findDOMNode(component) instead.
Warning: isMounted(...) is deprecated in plain JavaScript React classes. Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks.
Warning: replaceProps(...) is deprecated in plain JavaScript React classes. Instead, call React.render again at the top level.
Warning: replaceState(...) is deprecated in plain JavaScript React classes. Refactor your code to use setState instead (see https://github.com/facebook/react/issues/3236).
Warning: setProps(...) is deprecated in plain JavaScript React classes. Instead, call React.render again at the top level.
● CheckboxWithLabel › it changes the text after click
  - TypeError: Cannot read property 'textContent' of null
        at Spec.<anonymous> (/home/markus/Desktop/jest/examples/react-es6/__tests__/CheckboxWithLabel-test.js:19:24)
        at jasmine.Block.execute (/home/markus/Desktop/jest/vendor/jasmine/jasmine-1.3.0.js:1065:17)
        at jasmine.Queue.next_ (/home/markus/Desktop/jest/vendor/jasmine/jasmine-1.3.0.js:2098:31)
        at null._onTimeout (/home/markus/Desktop/jest/vendor/jasmine/jasmine-1.3.0.js:2088:18)
        at Timer.listOnTimeout [as ontimeout] (timers.js:112:15)
1 test failed, 0 tests passed (1 total)
Run time: 1.946s
npm ERR! Test failed.  See above for more details.

Answer 1

我不确定，但我认为这与我的 node.js 版本有关。 v0.12.4 和 iojs v2.2.1 都不工作。但是节点 v0.10.38 似乎可以工作。希望有更新:)

Answer 2

似乎“isElement”检查的是 React 组件实例，而不是渲染树。请参阅以下示例：

import ReactDomTestUtils from 'react-dom/test-utils';

isDOMComponent:

const reactTree = ReactDomTestUtils.renderIntoDocument(<div />);
expect(ReactDomTestUtils.isDOMComponent(reactTree)).toBe(true);
expect(ReactDomTestUtils.isElement(reactTree)).toBe(false);

是元素：

const reactElement = <div />;
expect(ReactDomTestUtils.isDOMComponent(reactElement)).toBe(false);
expect(ReactDomTestUtils.isElement(reactElement)).toBe(true);

React.addons.TestUtils.renderIntoDocument 总是 returns 空

React.addons.TestUtils.renderIntoDocument always returns null

reactjs

jestjs

更新