酶对象没有有用的方法 .to .length

Question

我有以下测试

import test from 'ava';
import React from 'react';
import { shallow } from 'enzyme';

import A from '../../../src/components/A/index';
import B from '../../../src/components/B/index';
console.log('loaded component test');

test('shallow', t => {
  const wrapper = shallow(<A />);
  t.is(wrapper.find(B).length, 38);
});

组件 A 是几个组件 B 的列表。我做错了什么？我正在使用酶和 AVA。

 Warning: A: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://facebook/react-special-props)
 Warning: A: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://facebook/react-special-props)
 t.is(wrapper.find(B).length, 38)
                                            |          
                                            0          

1 test failed [16:55:47]
1 uncaught exception


1. components › A › index › shallow
AssertionError: 0 === 38
 Test.fn (index.js:11:5)

Answer 1

问题是我需要完整的 DOM 才能测试这些嵌套组件。我加了

/** setup.js
 * provides a document for enzyme mount tests
 * simply require this file to make the environment available
 */
import test from 'ava';
var jsdom = require('jsdom').jsdom;

var exposedProperties = ['window', 'navigator', 'document'];

global.document = jsdom('');
global.window = document.defaultView;
Object.keys(document.defaultView).forEach((property) => {
  if (typeof global[property] === 'undefined') {
    exposedProperties.push(property);
    global[property] = document.defaultView[property];
  }
});

global.navigator = {
  userAgent: 'node.js'
};

test(t => {
  t.pass('DOM setup'); // silences ava warning
});

然后我利用了mount

import test from 'ava';
import React from 'react';
import { mount, shallow } from 'enzyme';
import setup from '../../setup';

import A from '../../../src/components/A/index';
import B from '../../../src/components/B/index';

test('should display no B if A given no props', t => {
  const wrapper = mount(<A />);
  t.is(wrapper.find(B).length, 0);
});

test('should display two Bs if A given two B via props', t => {
  const testBs = [
    { id: 1},
    { id: 2},
  ];

  const wrapper = mount(<A Bees={testBs} />);
  t.is(wrapper.find(B).length, 2);
});

注意我在将 B 传递给 find() 时没有使用 jsx 语法。它还有助于升级 ava、babel-core 版本并添加 es2017 预设以获得 async/await 支持。

酶对象没有有用的方法 .to .length

Enzyme object has no useful methods .to .length

enzyme

ava