反应中的单元测试样式组件

Question

我有一个 HTML 按钮使用样式化组件库进行样式化，我正在为其编写单元测试。 POC 代码如下所示：

const StyledButtonComponent = () => {
const [testText, setTestText] = React.useState();

const clickHandler = (e) => {
  e.preventDefault();
  setTestText('Lorem Ipsum')
  console.log('Button Clicked!');
}

return (
 <>
    <TestButton onClick={clickHandler} data-test="component-styled-button">
    Click Me!!
    </TestButton>
   <p data-test="text-tag">{testText}</p>
 </>
);
}

这里的 TestButton 是一个样式化的组件。

我的单元测试代码是：

describe('Styled Button Component', () => {
let wrapper;
const setup = () => mount(<StyledButtonComponent />)
const findByAttr = (wrapper, val) => {
   return wrapper.find(`[data-test='${val}']`)
}

beforeEach(() => {
  wrapper = setup();
});

it('should render the styled button component without errors', () => {
  const btnComponent = findByAttr(wrapper, 'component-styled-button');
  expect(btnComponent).toHaveLength(2);
});

it('should allow user to click on the styled button', () => {
  const btnComponent = findByAttr(wrapper, 'component-styled-button');
  btnComponent.simulate('click', { preventDefault() {}})
  const pTag = findByAttr(wrapper, 'text-tag');
  expect(pTag.render().text()).toBe('Lorem Ipsum')
});
});

但是对于第二次测试我得到一个错误：

方法“模拟”意味着在 1 个节点上运行。找到 2 个。

那么测试使用 Styled Component 呈现的组件的正确方法是什么？

Answer 1

当您在 EnzymeJS 的包装器中找到时，它会返回实际的 DOM 元素以及包装它的 React Wrapper。

要解决此问题，您可以使用多个选项。其中之一是 first().

const btnComponent = findByAttr(wrapper, 'component-styled-button').first();

参考：https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/first.html

另一个是at(index)。

const btnComponent = findByAttr(wrapper, 'component-styled-button').at(0);

参考：https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/at.html

反应中的单元测试样式组件

unit testing styled component in react

javascript

unit-testing

reactjs

jestjs

enzyme