Question

我对JavaScript测试和在新的代码库中工作完全陌生。我想编写一个在元素上检查className的测试。我正在与Jest和React-Testing-Library合作。下面，我有一个测试，该测试将基于variant道具呈现一个按钮。它还包含一个className和。我想对其进行测试。

it('Renders with a className equal to the variant', () => {
    const { container } = render(<Button variant="default" />)
    expect(container.firstChild) // Check for className here
})

我试图用hasClass来搜索诸如Enzyme之类的属性，但找不到任何东西。有谁知道如何用当前的库（react-testing-library，Jest）解决这个问题？

Answer 1

您可以使用react-testing-library轻松地做到这一点。

首先，您必须了解container或getByText等的结果仅仅是DOM节点。您可以像在浏览器中一样与它们进行交互。

因此，如果您想知道将什么类应用于container.firstChild，则可以像这样container.firstChild.className那样进行。

如果您在MDN中阅读有关className的更多信息，则会看到它返回 all 应用于元素的类，这些类之间用空格隔开，即：

<div class="foo">     => className === 'foo'
<div class="foo bar"> => className === 'foo bar'

根据您的情况，这可能不是最佳解决方案。不用担心，您可以使用其他浏览器API，例如classList。

expect(container.firstChild.classList.contains('foo')).toBe(true)

就是这样！无需学习仅适用于测试的新API。就像在浏览器中一样。

如果您经常检查某个类，可以通过在项目中添加jest-dom来简化测试。

然后测试变为：

expect(container.firstChild).toHaveClass('foo')

还有很多方便的方法，例如toHaveStyle可以帮助您。

请注意，react-testing-library是一个正确的JavaScript测试实用程序。与其他库相比，它具有许多优势。如果您不熟悉JavaScript测试，建议您加入spectrum forum。

Answer 2

您可以使用testing-library / jest-dom自定义匹配器。

@ testing-library / jest-dom库提供了一组自定义的笑话匹配器，可用于扩展笑话。这些将使您的测试更具声明性，易于阅读和维护。

https://github.com/testing-library/jest-dom#tohaveclass

it('Renders with a className equal to the variant', () => {
    const { container } = render(<Button variant="default" />)

    expect(container.firstChild).toHaveClass('class-you-are-testing') 
})

这可以在setupTest.js文件中全局设置

import '@testing-library/jest-dom/extend-expect';
import 'jest-axe/extend-expect';
// etc

Answer 3

该库可访问常规DOM选择器，因此也可以简单地做到这一点：

it('Renders with a className equal to the variant', () => {
    const { container } = render(<Button variant="default" />)
    expect(container.getElementsByClassName('default').length).toBe(1);
});

Answer 4

您需要了解react-testing-library背后的理念，以了解您可以做什么和不能做什么；

react-testing-library的目标是使测试避免包括组件的实现细节，而专注于编写使您有信心使用的测试。

因此按类名查询元素不符合react-testing-library哲学，因为它包含实现细节，类名是元素的实际实现细节，不是最终用户会看到的东西，并且会在更改时发生变化在元素生命周期中的任何时间。因此，与其尝试按用户看不到的内容搜索元素，而且可以随时更改的内容，不如尝试使用用户可以看到的内容（例如文本，标签）或在元素生命周期中保持不变的内容进行搜索。数据ID。

所以要回答您的问题，不建议您测试类名，因此您不能使用react-testing-library来做到这一点。尝试使用其他测试库，例如酶或反应测试实用程序

Answer 5

    // Link.react.test.js
import React from 'react';
import ShallowRenderer from 'react-test-renderer/shallow';
import App from './../../src/App'
describe('React', () => {
  it('className', () => {
    const renderer = new ShallowRenderer();
    renderer.render(<App />);
    const result = renderer.getRenderOutput();
    expect(result.props.className.split(' ').includes('welcome-framework')).toBe(true);
  });
});

Answer 6

正如其他人所提到的，您将需要使用酶。在尝试下面的代码结构之前，请为您的应用程序设置酶。

有关如何使用hasclass的简单示例

import React from 'react'

import CreateCode from 'modules/ReferralPage/components/CreateCode.js'

import { shallow } from 'enzyme';

describe('<CreateCode /> component tests', () => {

it('Shallow renders CreateCode component', () => {
    const wrapper = shallow(<CreateCode />).dive();
    expect(wrapper.hasClass('container')).toEqual(true);
});

});

道歉

Answer 7

首先，您应该使用适当的cols = 6 rows = 4 df = pd.DataFrame(df.values.T.reshape(cols,rows).T) df.rename(columns=df.iloc[0]).drop(0) A B C A2 B2 C2 1 0.1 0.8 0.3 1 1 1 2 0.4 0.7 0.6 2 2 2 3 0.6 0.9 0.8 3 3 3，例如：

这些库将为您提供几种方法来声明您的应用程序，因此您可以像这样简单地声明当前情况：

含酶：

JavaScript Testing utility

文档：Enzyme hasClass

使用柴酶：

const wrapper = mount(<MyComponent />);
expect(wrapper.find('.my-button').hasClass('disabled')).to.equal(true);

文档：chai-enzyme className

如何使用Jest和React测试库测试className

7 个答案: