代码之家 › 专栏 › 技术社区 › Simsons

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

use-state jest redux reactjs javascript

Simsons · 技术社区 · 4 年前

最初使用状态(displaymodel)隐藏模态。

我试图通过在display model中找到按钮来测试API调用。但是找不到它,因为它不在DOM上(display model为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>
);

1 回复 | 直到 4 年前

user1713450 4 年前

这些状态钩子的作用域是函数,因此函数之外的任何东西都无法访问它们。这就是为什么会出现“不是函数”错误。它类似于

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
})

然后您可以继续测试您的模态(比如用另一个命令单击Update按钮) fireEvent.click(updateBtn) .

如果您想模仿您的API,那么您还可以添加

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

现在,当您单击表单提交按钮时,它将调用mocked API函数,该函数将返回您定义的要返回的内容,并且假设它不抛出/拒绝,您的模态将显示出来,并且您将继续如上所述。