Jest.js 如何测试样式化组件？

s2j5cfk0 于 11个月前发布在 Jest

关注(0)|答案(2)|浏览(145)

我需要测试的是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)>类似，那么找到它的正确方法是什么呢？
任何建议将不胜感激。

jestjs

来源：https://stackoverflow.com/questions/44307339/how-can-i-test-styled-components

2条答案

按热度按时间

bhmjp9jg1#

您可以尝试使用以下命令将LoginWrapper显示名称设置为LoginWrapper：

LoginWrapper.displayName = 'LoginWrapper'

字符串
覆盖组件的显示名称。这是因为样式组件是一个HOC，如果用它 Package 组件，组件名称将更改。
另一件事是你需要删除测试用例中的这些行，因为它没有帮助：

let LoginWrapper;

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

afterEach(() => {
});

型
然后将下面的find从const divs = login.find(LoginWrapper);改为这样的字符串const divs = login.find('LoginWrapper');
我希望这对你有帮助！

赞(0）回复(0）举报 11个月前

kdfy810k2#

我在寻找如何测试样式化组件的想法时偶然发现了这个问题。虽然很晚了，但我想回答这个问题，希望它能帮助到别人。

**注意：**从问题中，我看到OP使用了enzyme库进行测试，但最好使用@testing-library/react，因为它提供了更直观的API。

1.删除在测试中重定义LoginWrapper。否则，测试将使用本地定义的组件而不是实际组件，这通常是不可取的。

let LoginWrapper;

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

字符串
1.从Login.js导出LoginWrapper。

// Login.js
export const LoginWrapper = styled(Wrapper)`
// Rest of the code left out for brevity

型
1.将data-testid分配给测试中的样式化组件，并使用相同的样式找到组件。

import { render, screen } from '@testing-library/react';
import { LoginWrapper } from '../components/Login';

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

  it('always render LoginWrapper', () => {
    const onSubmit = jest.fn();

    render(<LoginWrapper onSubmit={onSubmit} data-testid="login-wrapper" />);

    const loginWrapper = screen.getByTestId('login-wrapper');

    expect(loginWrapper).toBeVisible();
  });

});

型

奖励：

您可以测试样式是否按预期应用于样式化组件。

it('should have 5px left padding', () => {
    const onSubmit = jest.fn();

    render(<LoginWrapper onSubmit={onSubmit} data-testid="login-wrapper" />);

    const loginWrapper = screen.getByTestId('login-wrapper');
    const style = window.getComputedStyle(loginWrapper);

    expect(style.paddingLeft).toBe('5px');
  });

型

赞(0）回复(0）举报 11个月前

我来回答

Jest.js 如何测试样式化组件？

2条答案

相关问题

热门标签

最新问答