即使传递了正确的道具，简单的 React 测试也会失败

Question

我正在尝试运行我认为应该是对我的 React 项目中的模态组件进行相当简单的测试，但无论出于何种原因，测试一直失败。即使我可以看到我正在传递应该使组件按预期呈现的正确道具，情况也是如此。

我的模式代码看起来像这样：

从 'react' 导入 React；从 '@fluentui/react';

导入 { Dialog, DialogFooter, DefaultButton, PrimaryButton, DialogType }

const Modal = (props) => {
  console.log('Modal is firing...', props); // I see the correct props here, passed in via the test
  if (!props.showModal) return null;

  if (props.showModal) {
    return (
      <Dialog
        hidden={!props.showModal}
        data-testid="modal"
        dialogContentProps={{
          type: DialogType.normal,
          title: props.title,
          subText: props.subText,
        }}
        modalProps={{
          isBlocking: false,
        }}
      >
        <DialogFooter>
          <PrimaryButton
            text="Yes"
            onClick={() => {
              props.confirm();
              props.close();
            }}
          />
          <DefaultButton
            text="No"
            onClick={() => {
              props.close();
            }}
          />
        </DialogFooter>
      </Dialog>
    );
  };
}

export default Modal;

这是我的测试：

import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Modal from './Modal';

beforeEach(() => {
  jest.spyOn(console, 'warn').mockImplementation(() => {});
});

it('renders modal correctly', () => {
  const props = { title: "A Test Title", subText: "Test subtext", showModal: true };
  const { getByText } = render(<Modal props={props} />);
  expect(getByText('Test subtext')).toBeInTheDocument();
});

我在测试失败时遇到的错误是：

Unable to find an element with the text: Test subtext. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Answer 1

在你的测试中，尝试传播道具，比如：

render(<Modal {...props} />)

即使传递了正确的道具，简单的 React 测试也会失败

Simple React Test Failing Even Though Correct Props Being Passed In

reactjs

react-testing-library