Как проверить строку «... loading» в компоненте React, который использует styled-компоненты? - PullRequest
Новая
       27

Как проверить строку «... loading» в компоненте React, который использует styled-компоненты?

0 голосов
/ 01 ноября 2019

Как вы пишете шутливые ферментные утверждения для стилизованных компонентов?

Обычно я настраиваю тесты так: 

import React from 'react';
import { shallow } from 'enzyme';
// test-setup.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Post from '../components/Post';
import Header from '../components/Header';
import HeaderDefaultPropsInit from './default-props/Header.defaultProps';
//import localStorage from './../../setUpTests';

configure({ adapter: new Adapter() });

describe('The header before all of the articles have been read', () => {
  let wrapper;
  beforeEach(() => {
    const defaultProps = {
      ...HeaderDefaultPropsInit,
      fetchPost: jest.fn(),
      history: {
        push: jest.fn(),
      },

    };
    wrapper = shallow(<Header  {...defaultProps} />);
  });

Вывод обертки будет выглядеть почтикак обычный блок HTML. Обычно я пишу утверждения, используя wrapper.find('some-element'), например: 

it('renders the image correctly', () => {
     expect(wrapper.find('.image').hasClass('image')).toBe(true);
   });

, но это для проверки вывода jsx, отображаемого ферментом, и выход легко пересекается, потому что вы можете просто использовать синтаксис типа jQuery, потому что он приходиткак html.

Однако:

Когда я использовал стилизованные компоненты, результат console.log (wrapper.debug ()) таков: 

  <styled.div>
        <styled.div color={[undefined]}>
          <styled.span>
            ...loading
          </styled.span>
          <br />
          <strong className="h4">
            <styled.span />
          </strong>
        </styled.div>
      </styled.div>

Шоковый ужас - нет нормальных html-элементов для записи нормальных утверждений!

Как же вы пишете утверждение для: 

<styled.div>

вместоиз 

<div class="some-class">

Ничто не может отличить один элемент от другого 

expect(wrapper.find('styled.div').contains('..loading')).toBe(true);

может относиться к любому styleled.div

Я просто хочу проверить, содержит ли онсообщение "... загрузка". Должно быть, я упускаю что-то очевидное - как все это делают?

1 Ответ

0 голосов
/ 01 ноября 2019

ответ заключается в том, чтобы дать стилизованному компоненту отображаемое имя после его создания. 

const CalloutWrapper = styled.div`
  width: 450px;
`;


CalloutWrapper.displayName = 'CalloutWrapper';

Затем, когда вы отображаете его с помощью console.log(wrapper.debug())

, оно выглядит следующим образом: 

 <CalloutWrapper>
   ...loading
 </CalloutWrapper>

и вы можете делать утверждения почти как обычно 

 it('it renders  the loading message', () => {
    expect(wrapper.find('CalloutWrapper').html()).toContain('...loading');
  });

см. Здесь https://github.com/styled-components/styled-components/issues/896

...