Question

正在处理商店项目并尝试测试“确认”页面。在该页面上有一个 button 'Send email'，它在 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()

反应 (JEST) 测试

0 个答案: