小编jar*_*win的帖子

我正在将类组件重构为功能组件。

在我的测试文件中，我使用的是酶，但我正在迁移到反应测试库

这是我正在使用酶进行的测试

it('should change module when clicked button login', () => {
     const wrapper = mount(<SignUp setModuleCallback={jest.fn()} />)
     const instance = wrapper.instance()

     jest.spyOn(instance, 'setModule')
     wrapper.find('button#login-button').simulate('click')

     expect(instance.setModule).toHaveBeenCalled()
   })

这就是我尝试使用react-testing-library 做的事情

it('should change module when clicked button login', async () => {
     const { getByTestId } = render(<SignUp setModuleCallback={jest.fn()} />)
     const instance = getByTestId('submit')

     jest.spyOn(instance, 'setModule')

     const button = await waitFor(() => getByTestId('submit'))

     act(() => {
       fireEvent.click(button)
     })

     expect(instance.setModule).toHaveBeenCalled()
   })

这是我收到的错误

我正在尝试输入输入的 ref，但不确定如何输入。我用它来上传文件。知道如何输入这个吗？

const ProfileLayout: React.FC = ({ children }) => {

  let inputUpdateAvatarPhoto = useRef();

.
.
.
.

 const handleImageChange = async (e: any) => {
   const formData = new FormData();
        
   formData.append('avatar', inputUpdateAvatarPhoto.files[0]);
    
.
.
.
.

    <input
      id="avatar"
      accept="image/*"
      type="file"
      ref={input => (inputUpdateAvatarPhoto = input)}
      onInput={e => {
      handleImageChange(e);
      }}
    />

我正在重构项目中的一些代码，将类组件传递给功能组件。在我的测试中出现了一些错误。

我有一个名为“MenuWeb”的组件，我现在正在其中使用 redux hooks。

这就是测试代码

describe('Testing MenuWeb', () => {
  it('should render Menu Web correctly', () => {
    const wrapper = shallow(<MenuWeb store={store} />)
    expect(wrapper).toMatchSnapshot()
  })

这就是我收到的错误：

我知道酶不支持钩子，但我不知道如何使用现在的反应测试库重构这个测试。我尝试按照消息所述使用提供者进行包装，但它不起作用，或者我做错了什么。

我试图让我的手风琴表现得像下面的图像，但我不知道如何用我的 jquery 代码切换“活动”类。

第一个项目（“在线现金返还”）以“活动”开始，但是当我单击另一个项目时，我想删除它的类。

该图像非常清楚地解释了我想要的预期行为。

我的代码：

$('.menu').on('click', function() {
  $('.content').hide();
  $(this).find('.content').show();
});


$('.menu').on('click', function(event) {
  $target = $(event.target);
  $target.addClass('active');
});

.sectionThree-container>ul {
  list-style: none;
}

.sectionThree-container>ul p {
  display: none;
}

.sectionThreeOptions>h2 {
  font-family: Poppins;
  font-style: normal;
  font-weight: bold;
  font-size: 22px;
  line-height: 22px;
  color: #4F4F4F;
  margin-left: 22px;
  cursor: pointer;
}

.sectionThreeOptions>h2.active {
  font-family: Poppins;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  line-height: 22px;
  color: #222222;
  margin-left: 0;
}

.sectionThree-container .circle {
  width: 32px;
  height: 32px;
  left: 142px;
  top: 2050px;
  background: #FF6B7D; …