代码之家 › 专栏 › 技术社区 › Giesburts

如何使用jest和react测试库测试类名

react-testing-library jestjs reactjs javascript

Giesburts · 技术社区 · 6 年前

我对javascript测试和在新的代码库中工作完全陌生。我想编写一个测试来检查元素上的类名。我正在使用jest和react测试库。下面我有一个测试,它将根据 variant 支柱。它还包含一个类名和。我想测试一下。

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

我试着在谷歌上搜索一个类似于酶 hasClass 但什么也找不到。有人知道如何用当前库(react testing library,jest)解决这个问题吗?

3 回复 | 直到 6 年前

Gio Polvara 6 年前

使用react测试库可以很容易地做到这一点。

首先,你必须明白 container 或者是 getByText 等等只是dom节点。您可以像在浏览器中那样与它们交互。

所以,如果你想知道什么类被应用到 container.firstChild 你可以这样做 container.firstChild.className .

如果你读到更多关于 className 在里面 MDN 你会看到它回来的 全部的 应用于由空格分隔的元素的类,即:

<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测试库是一个合适的javascript测试工具。它比其他图书馆有许多优点。我鼓励你加入 spectrum forum 如果你对javascript测试还不熟悉的话。

-5

Marcos Gonçalves 6 年前

一开始你应该用 JavaScript Testing utility ,例如:

Enzyme ;
Chai (Chai-Enzume) ;
等等。。。

这些库将为您提供几种方法来断言您的应用程序,因此您可以简单地断言您当前的案例,如下所示:

加酶:

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

文档: Enzyme hasClass

与柴酶:

const wrapper = mount(<MyComponent />);

expect(wrapper.find('span')).to.have.className('child');
expect(wrapper.find('span')).to.not.have.className('root');

文档: chai-enzyme className

-5

Manish Poduval 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);
});

});

对格式化表示歉意