Reactjs 如何测试字符串'；。。。装载'；在使用样式化组件的React组件中？

如何为样式化组件编写jest酶断言？

通常我会设置如下测试：

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} />);
  });

但这是为了测试由Ezyme呈现的jsx的输出，并且输出很容易遍历，因为您可以只使用jQuery类型语法，因为它与html非常相似

但是：

当我使用样式化组件时 console.log（wrapper.debug（）） 这是：

可以引用任何styled.div

我只想测试它是否包含“…加载”消息。

---

我肯定遗漏了一些显而易见的东西——其他人是如何做到这一点的？

答案是在创建样式化组件后为其提供一个显示名称

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


CalloutWrapper.displayName = 'CalloutWrapper';

然后，当您使用

console.log（wrapper.debug（））呈现它时

看起来是这样的：

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

 <CalloutWrapper>
   ...loading
 </CalloutWrapper>

看这里

<div class="some-class">

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

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


CalloutWrapper.displayName = 'CalloutWrapper';

 <CalloutWrapper>
   ...loading
 </CalloutWrapper>

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