Блог

У меня есть следующий тест

 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 представляет собой список нескольких компонентов Bs. Что я могу делать неправильно? Я использую Enzyme и 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)
  

Проблема заключалась в том, что мне нужен был полный 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.