时间戳

首页 > 解决方案 > 简单的 React 按钮测试失败

javascript - 简单的 React 按钮测试失败

问题描述

我用 jest 来测试 React 中的一个简单按钮，但它一直失败。我最新的迭代抱怨渲染。我是测试新手，我已经有一段时间了，无法弄清楚。我在这里想念什么？

这是我的App.js


function clickMe() {
  
  alert("Hello")

}

function App() {
  return (
    <div className="App">
      <button id="btn" onClick={clickMe}>Click Me!!</button>

    </div>
  )
}

export default App;

这是我的App.test.js

import React from 'react'
import {render} from 'react-dom'
import App from './App'


test("Click", () => {
  const {container} = render(<App />)

  const button = getByTestId(container, 'btn')
  fireEvent.click(button)
})

标签： javascriptreactjsjestjs

解决方案

您可以使用酶库模拟一些事件

为此，首先通过 npm 安装它，然后导入

import {shallow} from 'enzyme';

使用此结构模拟点击底部后

创建包装器

let wrapper = shallow(<App />);
beforeEach( ()=>{
    wrapper = shallow(<CounterApp />);
});

这会创建渲染组件的模拟并让您能够模拟事件，这种方法在我的项目 counterApp 中工作

test('Click', ()=>{

    wrapper.find('button').at(0).simulate('click');
    
    expect(//The action of your botton).toBe(//the result expected);
});

推荐阅读