reactjs - 反应（JEST）测试

Question

处理商店项目并尝试测试“确认”页面。在那个页面上有一个button“发送电子邮件”，它在disabled属性中有一个功能。该函数的作用是检查查询结果。具体来说，它检查是否有任何项目具有isSelected=true. 如果至少一个项目具有此属性，则意味着该按钮未被禁用（如果没有任何项目具有此属性，则按钮被禁用）。

这是测试代码：

const mocks = [
  {
    request: {
      query: GET_CONFIRM_DETAILS,
      variables: { storeId: testStoreId}
    },
    result: {
      data: {
        __typename: 'Data',
        store: {
          __typename: 'store',
          id: '1',
          referenceNumber: 'TESTREF',
          items: [
            {
              __typename: 'Option',
              id: '1',
              name: 'Option 1',
              isSelected: true
              
            }
          ]
        }
      }
    }
  }
]

test('opens modal on click', async () => {
  const { getByText, queryByTestId } = render(
    
        <MockedProvider mocks={mocks} addTypename={false} resolvers={resolvers}>
          <ConfirmPage />
        </MockedProvider>
  )

  const button = getByText('Send email')
  fireEvent.click(button)
  await waitForUpdate()
  expect(queryByTestId('modal')).toBeInTheDocument()
  expect(queryByTestId('contact')).toBeInTheDocument()
})

单击按钮时（如果未禁用），会弹出一个模式并显示在屏幕上。这就是测试中断的地方，即使我isSelected在我的模拟查询中向项目添加了一个属性。

任何想法为什么这个测试会失败？

expect(received).toBeInTheDocument()

received value must be an HTMLElement or an SVGElement.
Received has value: null
> 102 |   expect(queryByTestId('modal')).toBeInTheDocument()

标签： reactjstestingjestjs