Question

我正在使用create-react-app，并在React组件中编写了我的第一个测试，但无法正常工作。我没有在应用程序中安装任何其他软件包，因此默认情况下，我仅使用与create-react-app捆绑在一起的软件包。这是我的 Button.js 组件：

function Button(props) {

  if(props.classes) {
    for(let i = 0; i < props.classes.length; i++) {
       btnClasses += `${props.classes[i]} `;
    }
  }

  return (
    <button className={btnClasses}>
      {props.text}
    </button>
  );
}

该组件本身可以工作。我可以设置text和classes道具并像这样使用它：

<Button text="My Button" classes={['myclass', 'myotherclass']} />

我想编写一个测试，当我通过一个作为道具时，检查按钮是否具有该类。这是我的 Button.test.js ：

import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import { act } from 'react-dom/test-utils';

import Button from './Button';

let container = null;

beforeEach(() => {
  container = document.createElement('div');
  document.body.appendChild(container);
});

describe('Button', () => {

  it('renders with classes', () => {
    act(() => {
      render(<Button classes={['myclass']} />, container);
    });
    expect(container.classList.contains('myclass')).toBe(true);
  });
});

该测试失败，我不知道为什么。我的印象是您可以像其他任何DOM节点一样与container进行交互。当我console.log(container.classList)时，我得到一个空的DOMTokenList {}。我想念什么？为什么此测试不起作用？

Answer 1

您需要使用酶https://airbnb.io/enzyme/来测试您的React组件。笑话也只用于测试功能和逻辑。

此示例将帮助您： https://airbnb.io/enzyme/docs/api/ReactWrapper/hasClass.html

Answer 2

beforeEach();设置正在设置一个div，该div环绕您的组件。将元素定位到容器内。

describe('Button', () => {

  it('renders with classes', () => {
    act(() => {
       render(<Button classes={['myclass']} />, container);
   });

  expect(container.querySelector('button').classList.contains('myclass')).toBe(true);
});

如何在React中编写Jest测试以检查组件是否具有CSS类？

2 个答案: