Question

我需要测试的是LoginWrapper总是在Login组件内部进行渲染。我测试它如下，但由于无法找到LoginWrapper，因此无法通过。

  import React from 'react';
  import Login from '../components/Login';

  import Wrapper from '../components/Wrapper';
  import styled from 'styled-components';

  describe('test login', () => {

    const shallowRender = (props) => shallow(<Login {...props} />);
    let LoginWrapper;

    beforeEach(() => {
      LoginWrapper = styled(Wrapper)``;
    });

    afterEach(() => {
    });

    it('always render LoginWrapper', () => {
      const login = shallowRender({
        onSubmit: () => {}
      });
      const divs = login.find(LoginWrapper);
      expect(divs).toHaveLength(1);
    });

  });

Login.js

  import React from 'react';
  import Wrapper from './Wrapper';
  import { H5, Text, ALink } from '@lendi/lendi-components';
  import styled from 'styled-components';

  const LoginWrapper = styled(Wrapper)`
    .mobile {
      margin-bottom: 2px;
    }
    .signup {
      padding-left: 5px;
    }
  `;

  function Login ({onSubmit}) {
      return (
        <LoginWrapper>
          <H5 style={style.center}>
            {txt.title}
          </H5>
        </LoginWrapper>
        );
    }

export default Login;

看起来LoginWrapper会呈现<Styled(styled.div)>，那么找到它的正确方法是什么？

任何建议都将受到赞赏。

Answer 1

您可以尝试使用以下方法将LoginWrapper的显示名称设置为LoginWrapper：

LoginWrapper.displayName = 'LoginWrapper'

覆盖组件的显示名称。这是由于Style Component是HOC，并且如果用它包装组件，则组件名称将更改。

另一件事是您需要删除测试用例中的这些行，因为这样做无济于事：

let LoginWrapper;

beforeEach(() => {
  LoginWrapper = styled(Wrapper)``;
});

afterEach(() => {
});

，然后将您的find从const divs = login.find(LoginWrapper);更改为这样的字符串const divs = login.find('LoginWrapper');

希望有帮助！

我该如何测试样式组件？

1 个答案: