Тестирование компонента React с помощью Enzyme Jest для поиска элемента HTML - PullRequest
Новая
       52

Тестирование компонента React с помощью Enzyme Jest для поиска элемента HTML

0 голосов
/ 09 октября 2019

У меня есть компонент с именем Typography, который принимает variant реквизит и соответственно отображает элемент.

Typography.js

Пропускаю много для краткости

import { StyledH1, ... } from './Typography.styles';

const variantMapping = {h1: StyledH1, ...};

const Typography = ({ children, ...props }) => {
  const Component = variantMapping[props.variant] ? variantMapping[props.variant] : 'span';

  return <Component {...props}>{children}</Component>;
};

Итак, я попробовал множество способов получить рабочий тест. Прямо сейчас я пытаюсь передать variant="h1", вернуть следующую разметку <h1 class="..styled component what nots...">...</h1> и проверить, что <h1> отрисовывает

Typography.spec.js 

import { mount } from 'enzyme';
import Typography from '.';

describe('<Typography />', () => {
  it('renders H1', () => {
    const wrapper = mount(<Typography variant="h1" />);
    const elem = wrapper;
    console.log(elem.debug());
    expect(wrapper.find('h1')).toEqual(true);
  });
});

Запустив отладчик, я возвращаюсь 

console.log components/Typography/Typography.spec.js:9
    <Typography variant="h1" bold={false} transform={{...}} small={false}>
      <Typographystyles__StyledH1 variant="h1" bold={false} transform={{...}} small={false}>
        <StyledComponent variant="h1" bold={false} transform={{...}} small={false} forwardedComponent={{...}} forwardedRef={{...}}>
          <h1 transform={{...}} className="Typographystyles__StyledH1-sc-1n6ui1k-0 bvGdAG" />
        </StyledComponent>
      </Typographystyles__StyledH1>
    </Typography>

Итак, я изменил переменную элемента, чтобы найти элемент h1 const elem = wrapper.find('h1');

И отладчик возвращает 

console.log components/Typography/Typography.spec.js:9
<h1 transform={{...}} className="Typographystyles__StyledH1-sc-1n6ui1k-0 bvGdAG" />

Я не уверен, что это правильный подход, просто попытка получить хотя бы 1 разумно пройденный тест.

В этот момент каждое написанное мной expect утверждение возвращается с ошибкой илиошибка

  • expect(elem).to.have.lengthOf(1); Ошибка типа: невозможно прочитать свойство 'иметь' из неопределенного
  • expect(elem.contains('h1')).to.equal(true); Ошибка типа: ошибка не может прочитать свойство 'равно' из неопределенного
  • expect(elem.contains('h1')).toEqual(true); ожидаем (получен) .toEqual (ожидается) // глубокое равенство

Перепробовал еще несколько вариантов, и ничего не получается. Любая помощь будет принята с благодарностью.

Ответы [ 2 ]

0 голосов
/ 09 октября 2019

Так что, похоже, мои утверждения, использующие Enzyme, на expect не настроены. После прочтения документации Enzyme моя установка использует только адаптер, позволяющий упростить рендеринг / монтаж компонентов. У меня нет возможности использовать утверждения Фермента из документов, потому что они не установлены. Скорее, чтобы ответить на эту конкретную проблему, я должен использовать утверждения Jest. 

describe('<Typography />', () => {
  it('renders h1', () => {
    const wrapper = mount(<Typography variant="h1" />);
    const elem = wrapper.find('h1');
    expect(elem.length).toBe(1);
  });
});

https://jestjs.io/docs/en/expect

0 голосов
/ 09 октября 2019

Установка фермента в полном объеме:

.find (селектор) => ReactWrapper возвращает оболочку, а не логическое значение 

it('renders H1', () => {
  const wrapper = mount(<Typography variant="h1" />);
  const elem = wrapper;
  console.log(elem.debug());
  expect(elem.find('h1')).to.have.length(1);
});

.contains (nodeOrNodes) => boolean - Вот ссылка на общие ошибки , в частности, что он ожидает элемент реагирования, а не элемент HTML или селектор CSS

...