无法使用 Jest 和 Provider 组件在 React 测试中注入 MobX 存储

Question

我正在尝试为 React 组件编写一个单元测试，其中我要求 MobX 存储中的属性处于非默认状态。

我一直在尝试修改状态并使用

<Provider>

组件标签将其注入到组件中。

我的商店是这样的：

`export class ModalControlStore {
     root: RootStore;

    constructor(root: RootStore) {
        this.root = root;
        makeAutoObservable(this);
    }

    modalIsOpen = false;

    setModalIsOpen(isModalOpen: boolean) {
        this.modalIsOpen = modalIsOpen
    }
}`

使用根存储在我的 React 组件中检索存储：

export function useModalControlStore() {
  const { modalControlStore  } = useRootStore();
  return modalControlStore ;
}

它在我的组件中实例化如下： const { modalIsOpen } = useModalControlStore();

然后在我的测试中，我尝试以下操作：

beforeEach(() => {
    const modalControlStore = useModalControlStore();
    modalControlStore.setModalIsOpen(true);

    render(
        <Provider modalControlStore={modalControlStore}>
           <PopUpModal/>
        </Provider>
    )
});

但是每当我运行测试时，该值仍然为假。我也遵循了其他几条路径，但没有一条成功地模拟或替换了商店。

Answer 1

不应在测试中直接使用 useModalControlStore，您应该手动创建和配置它并将其传递给 Provider。

describe('PopUpModal Component', () => {
  let modalControlStore;
  let rootStore;

  beforeEach(() => {

    rootStore = new RootStore();
    modalControlStore = new ModalControlStore(rootStore);

   
    modalControlStore.setModalIsOpen(true);
  });

  it('should display the modal when modalIsOpen is true', () => {
  
    const { getByText } = render(
      <Provider modalControlStore={modalControlStore}>
        <PopUpModal />
      </Provider>
    )
  // the rest of your test

  });
});