Question

使用jest和react-testing-library进行React前端测试时，我希望能够测试应用于DOM元素的样式（不仅仅是类名）。

我正在使用webpack构建我的SPA。到目前为止，通过查看文档并查看Jest样式的组件，我得出了以下结论：

//fileMock.js
module.exports = 'test-file-stub';

// jest.config.js
moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|svg)$': 'tests/jest/fileMock.js',
    '^.+\\.(css|scss)$': 'identity-obj-proxy'
},

// prototype.spec.js
import React from 'react';
import { render, fireEvent, cleanup } from '@testing-library/react';
import 'jest-styled-components';
import '@testing-library/jest-dom';
import '@testing-library/jest-dom/extend-expect';
import Button from '../../components/Buttons/Button'; // my button component

describe('prototype', () => {
  it('Calls passed action prop on click', () => {
    const buttonText = 'TestButton';
    const buttonID = 'buttonID';

    const buttonClickAction = jest.fn();
    const { getByTestId } = render(
        <Button
            action={buttonClickAction}
            text={buttonText}
            data-testid={buttonID}
        />
    );
    const prototypeButton = getByTestId(buttonID);
    expect(prototypeButton).toMatchSnapshot();
    // the following style rule is defined in a .scss file,
    // which is imported inside the Button component
    expect(prototypeButton).toHaveStyleRule('height', '44px'); 

    fireEvent.click(atlassianButton);
    expect(buttonClickAction).toHaveBeenCalled();
});

问题在于样式没有在jsdom环境中呈现。 .toHaveStyleRule（）输出“在传递的组件上找不到样式规则”，并且快照不包含任何样式的信息，仅包含className。

这意味着我无法测试是否有人错误地更改了scss类的内容，或者某些dom元素在：hover上的行为是否有所不同（如果由CSS处理）的情况。

有人知道我想念什么吗？

如何将Sass生成的样式添加到Jest快照中

0 个答案: