Right way to write tests.

[DenianFossatti]

Description

I've a question about how to write better tests, in unit tests we usually test every component alone, and therefore, we have one test closure by scenario we want to test, I think I'm writing tests just like I write unit tests, and it's seems to me that it's not the ideal for e2e tests because I'm repeating a lot of logic in each test closure, what you guys think ?

I'm currently writing tests in this way, because in my opinion, I can see clearly see where it fails, when it fails. But the test becomes more and more repetitive.

it('should render screen 1 and have text and labels', async () => {
    await expect(element(by.id("Screen1").toBeVisible()

    await expect(element(by.text('Text Here.'))).toBeVisible()

    await expect(element(by.id("TextFieldID").toBeVisible()
    await expect(element(by.id("TextFieldID").toHaveLabel('TextField Label')
    await expect(element(by.text('Next'))).toBeVisible()
  })

  it('should render screen 2 and have text and labels', async () => {
    await element(by.id("TextFieldID").typeText("Text to type")
    await element(by.text('Next')).tap()

    await waitFor(element(by.id("Screen2"))
      .toBeVisible()
      .withTimeout(5000)

    await expect(element(by.text('Text presented on screen2'))).toBeVisible()

    await expect(element(by.text('Another Text presented on screen2'))).toBeVisible()
    await expect(element(by.text('Another Text 2 presented on screen2'))).toBeVisible()
    await expect(element(by.text('Button on Screen 2'))).toBeVisible()

    await expect(element(by.id("TextFieldID2").toHaveLabel('Input Label')
    await expect(element(by.id("TextFieldID2").toBeVisible()
  })

  it('should render screen 3 and have text and labels', async () => {
    // Screen 1
    await element(by.id("TextFieldID").typeText("Text to type")
    await element(by.text('Next')).tap()

    // Screen 2
    await waitFor(element(by.id("Screen2")).toBeVisible().withTimeout(5000)
    await element(by.id("TextFieldID2").typeText("Text to type")
    await element(by.text('Next')).tap()

    // Screen 3
    await waitFor(element(by.id("Screen3")).toBeVisible().withTimeout(10000)

    await expect(element(by.text('Another Text presented on screen3'))).toBeVisible()
    await expect(element(by.text('Another Text 2 presented on screen3'))).toBeVisible()
    await expect(element(by.text('Component on Screen3'))).toBeVisible()
  })

OR is better to write this way ?

it('should go from screen 1 to screen 3', async () => {
    // Screen 1
    await expect(element(by.id("Screen1").toBeVisible()
    await expect(element(by.text('Text Here.'))).toBeVisible()
    await expect(element(by.id("TextFieldID").toBeVisible()
    await expect(element(by.id("TextFieldID").toHaveLabel('TextField Label')
    await expect(element(by.text('Next'))).toBeVisible()

    await element(by.id("TextFieldID").typeText("Text to type")

    await element(by.text('Next')).tap()

    // Screen 2
    await waitFor(element(by.id("Screen2")).toBeVisible().withTimeout(5000)

    await expect(element(by.text('Text presented on screen2'))).toBeVisible()
    await expect(element(by.text('Another Text presented on screen2'))).toBeVisible()
    await expect(element(by.text('Another Text 2 presented on screen2'))).toBeVisible()
    await expect(element(by.text('Button on Screen 2'))).toBeVisible()

    await expect(element(by.id("TextFieldID2").toHaveLabel('Input Label')
    await expect(element(by.id("TextFieldID2").toBeVisible()

    await element(by.text('Next')).tap()

    // Screen 3
    await waitFor(element(by.id("Screen3")).toBeVisible().withTimeout(10000)
    await expect(element(by.text('Another Text presented on screen3'))).toBeVisible()
    await expect(element(by.text('Another Text 2 presented on screen3'))).toBeVisible()
    await expect(element(by.text('Component on Screen3'))).toBeVisible()
  })

Your environment

Detox version: 19.6.7 React Native version: 0.67.2 Node version: Device model: OS: mac-os Test-runner: jest-circus

[phuongwd]

@DenianFossatti Im planning migrate to follow this guide https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests#Folder-structure from page objects pattern hope that helps

[ansonliao]

BTW, does Detox support similar to the page object pattern?

[effektsvk]

BTW, does Detox support similar to the page object pattern?

@ansonliao This appears to be working fine. At least for me.

[ansonliao]

Thanks @effektsvk , let me check.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you believe the issue is still relevant, please test on the latest Detox and report back.

Thank you for your contributions!

For more information on bots in this reporsitory, read this discussion.

[stale[bot]]

The issue has been closed for inactivity.