Тест Jest-Puppeteer с React не печатает текст на входе - PullRequest
Новая
       39

Тест Jest-Puppeteer с React не печатает текст на входе

0 голосов
/ 25 октября 2019

У меня есть приложение, созданное из "create-реагировать-приложение", и я добавил кукловода для запуска сквозных тестов. При попытке запустить тест для входа в систему, я не могу набрать текст в журнале в форме ввода.

jest-puppeteer.config.js: 

module.exports = {
  server: {
    command: `npm start`,
    port: 3000,
    launchTimeout: 10000,
    debug: true
  }
};

jest.config.js: 

module.exports = {
  preset: 'jest-puppeteer',
  testRegex: './*\\index.test\\.js$'
};

мой тест входа в систему: 

it('should login test user', async () => {
    await page.waitForSelector('form[name="login"]');
    await expect(page).toFillForm('form[name="login"]', {
      username: 'abcd',
      password: 'abcd'
    });
    await expect(page).toMatchElement('input[name="username"]', { text: 'abcd' });
  }

Я также пытался использовать любой из следующих способов:

await page.type('#username', 'abcd');

await page.click('input[name="username"]');
await page.type('input[name="username"]', 'abcd');

await expect(page).toFill('input[name="username"]', 'abcd');

Но, тем не менее, текст не печатается. Интересно, подходит ли моя установка для создания-реакции-приложения. Есть идеи, как это решить?

Ответы [ 2 ]

1 голос
/ 28 октября 2019

Puppeteer по умолчанию работает без заголовка, я думаю, что он работает, но в фоновом режиме.

Добавьте следующие строки в ваш jest-puppeteer.config.js: 

launch: {
    headless: false,
}

такэто будет выглядеть так: 

module.exports = {
  launch: {
        headless: false,
  },
  server: {
    command: `npm start`,
    port: 3000,
    launchTimeout: 10000,
    debug: true
  }
};

Это откроет браузер, и вы сможете увидеть, что происходит.

0 голосов
/ 28 октября 2019

Прежде чем продолжить, пожалуйста, проверьте свое приложение и проверьте, не ошиблись ли селекторы или что-то в этом роде. Почему-то я предпочитаю использовать только кукловода, прежде чем использовать тестовый фреймворк, такой как Jest или любой другой, который вам нравится, и посмотреть, правильно ли работает код.

И не забудьте добавить headless : false для начала теста.

Вы можете попробовать это. 

describe('Login', () => {
    beforeAll(async () => {
        await page.goto('https://localhost:3000');
    })

    it('should login test user', async () => {

        const waitForTheName = await page.waitForSelector('input[name="username"]');
        const focusInputName = await page.focus('input[name="username"]')
        const writeInputName = await page.keyboard.type('abcd')

        const focusInputPaswd = await page.focus('input[name="password"]')
        const writeInputPaswd = await page.keyboard.type('abcd')

        await expect(page).toFillForm('form[name="login"]', {
            username: 'abcd',
            password: 'abcd'
        })

        await expect(page).toMatchElement('input[name="username"]', { text: 'abcd' })
    }
})
...