如何使用 jest 设置反应功能组件的状态

Question

我有一个组件，它有一个表单和模式。 单击提交时，会弹出模态，并在确认后发送对后端的调用。

最初，模态是通过使用状态 (displayModal) 隐藏的。

我试图通过在显示模式中找到按钮来测试 API 调用。 但是找不到它，因为它不在 DOM 上（显示模式为 false）。

我如何在玩笑测试中设置状态。

const MyTypeComponent: FunctionComponent<MyType> = ({
props1,
props2,
ownProp1,
ownProp2
}) => {
  //There are two use effects to do something
  //set the modal state
  const [displayModal, setdisplayModalOpen] = useState(false);
  const updateStatusquantityService = () => {
    //Call an API
  };
  const InventoryStatusquantityFormSubmitted = (form) => {
    if (!form.isValid) {
      return;
    }
    //If form valid, display the modal;
  
  };
  return (
    <>
          <Modal
            isOpen={displayModal}
            setIsOpen={setdisplayModalOpen}
            id={"InventoryStatusTypeModal"}
          >
           //Usual Modal stuff and then button
            <Button id={"statusquantityUpdateBtn"} variant="primary" label="Update" onClick={() => updateStatusquantityService()}/>
          </Modal>
          <Form>
             //On form submit, call InventoryStatusquantityFormSubmitted() and display the modal
          </Form>
    </>
  );
};
export default connect(
  (state: RootState) => ({
   //map states to props
  }),
  (dispatch: ThunkDispatch) => ({
    //map props 1 and props 2
  })
)(InventoryStatusquantity);

当我试图通过找到如下所示的模式按钮“ statusquantityUpdateBtn ”来触发点击时，我得到一个空值，因为模式不可见，因为它的值。

it('Should submit status types form11', () => {
    const submitButtonOnModal = wrapper.find('#statusquantityUpdateBtn').
});

我正在尝试使用更新状态

wrapper.instance().setdisplayModalOpen(true)

但是得到错误wrapper.instance().setdisplayModalOpen不是一个函数。

我正在使用简单的挂载命令进行挂载：

export const mountWithMemoryRouter = (element: JSX.Element) => {
    return mount(<MemoryRouter>{element}</MemoryRouter>);
};
 
wrapper = mountWithMemoryRouter(
    <Theme>
        <Provider store={store}>
            <MyTypeComponent
                {...defaultProps}
                ownProp1={null}
                ownProp2={null}
            />
        </Provider>
    </Theme>
);
 

Answer 1

这些状态钩子的作用域是函数，所以函数之外的任何东西都不能访问它们。 这就是为什么您会收到“不是函数”错误的原因。 它类似于

function x() {
   const y = 0
}

x().y // Error

我在您的代码中没有看到任何调用setdisplayModalOpen(true)以显示模态的内容。

假设您只提供了部分代码（但它是在您的计算机上编写的），并且有一些按钮或运行setdisplaymodalOpen(true)东西，（我假设有一个表单提交按钮）那么如果我需要测试这个，我会改为使用 React 测试库并有类似的东西

import { render, screen, fireEvent, waitFor } from 'react-testing-library'
import MyComponent from './components/one-to-test'

test('does whatever', async () => {
  render(<MyComponent/>)
  const showModalBtn = screen.getByText('Text of Button You Click to Display Modal')
  fireEvent.click(showModalBtn)
  await waitFor(() => expect(screen.getByText('Update')).not.toBeNull())
  // You are now assured the modal is visible and can continue with the rest of your test
})

在这个测试中，你首先指示 React 测试库渲染可以显示/隐藏模态的组件（即表单）。 （假设您单击了一个按钮以显示模态），您将获得该按钮，然后模拟对该按钮的单击，然后您的测试等待模态可见（在这种情况下，它会等到“更新" 包含在模态中的按钮是可见的）。

然后你可以继续测试你的模态（比如点击另一个fireEvent.click(updateBtn)的更新按钮。

如果你想模拟你的 API，那么你也可以添加

jest.mock('./my/api/library', () => ({
  whateverApiCall: jest.fn(() => whateverItShouldReturn)
})

现在，当您单击表单提交按钮时，它会调用您的模拟 API 函数，该函数返回您定义要返回的任何内容，并假设它没有抛出/拒绝，您的模态将显示，然后您继续如上所述。