reactjs 如何在RTL中覆盖render方法?

von4xj4u  于 2023-04-29  发布在  React
关注(0)|答案(1)|浏览(120)

我正在用RTL写测试。我使用beforeEach作为render函数:

beforeEach(() => {
  render(<Button {...props} />);
});

但是如果我需要通过特殊的 prop ,我怎么能覆盖这个?如果我只做:

const { getByRole } = render(<Button {...props} disabled />);

它将抛出
找到多个具有角色“button”的元素
还有,每次测试后我都需要清除吗,怎么清除?

nzk0hqpo

nzk0hqpo1#

rerender可以这样做
如果你想在测试中更新一个渲染组件的props,这个函数可以用来更新渲染组件的props。
例如:

import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import React from 'react';

const Button = (props: React.ButtonHTMLAttributes<HTMLButtonElement>) => <button {...props}>click me</button>

describe('76118663', () => {
  let rerender: ReturnType<typeof render>['rerender'];
  const props: React.ButtonHTMLAttributes<HTMLButtonElement> = { type: 'button' };
  beforeEach(() => {
    rerender = render(<Button {...props} />).rerender;
  });
  test('should override button disabled prop', () => {
    expect(screen.queryByRole('button')).toBeEnabled();
    rerender(<Button {...props} disabled />);
    expect(screen.queryByRole('button')).toBeDisabled();
  });

  test('should override button type prop and reset disabled prop', () => {
    rerender(<Button {...props} type='submit' />);
    expect(screen.queryByRole('button')).toBeEnabled();
    expect(screen.queryByRole('button')).toHaveAttribute('type', 'submit');
  })
})

测试结果:

PASS  stackoverflow/76118663/index.test.tsx (6.963 s)
  76118663
    ✓ should override button disabled prop (56 ms)
    ✓ should override button type prop and reset disabled prop (13 ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        7.237 s

软件包版本:

"@testing-library/react": "^11.2.7",

相关问题