1

次のテストがあります

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)
4

1 に答える 1

0

問題は、これらのネストされたコンポーネントをテストするために完全な 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);
});

に渡すときに jsx 構文を使用しなかったことに注意してBくださいfind()。avaまた、バージョンをアップグレードしbabel-core、プリセットを追加しes2017て async/await サポートを取得するのにも役立ちました。

于 2016-10-10T19:34:40.587 に答える