diff --git a/src/guide/scaling-up/testing.md b/src/guide/scaling-up/testing.md index 7ba40d2e3..c23dabe48 100644 --- a/src/guide/scaling-up/testing.md +++ b/src/guide/scaling-up/testing.md @@ -1,6 +1,29 @@ + # テスト {#testing} @@ -40,7 +63,7 @@ Vue アプリケーションのテスト戦略を設計する際には、以下 ```js // helpers.js -export function increment (current, max = 10) { +export function increment(current, max = 10) { if (current < max) { return current + 1 } @@ -129,62 +152,66 @@ Vue アプリケーションでは、コンポーネントは UI の主要な構 - ```js - const valueSelector = '[data-testid=stepper-value]' - const buttonSelector = '[data-testid=increment]' +```js +const valueSelector = '[data-testid=stepper-value]' +const buttonSelector = '[data-testid=increment]' - const wrapper = mount(Stepper, { - props: { - max: 1 - } - }) +const wrapper = mount(Stepper, { + props: { + max: 1 + } +}) - expect(wrapper.find(valueSelector).text()).toContain('0') +expect(wrapper.find(valueSelector).text()).toContain('0') - await wrapper.find(buttonSelector).trigger('click') +await wrapper.find(buttonSelector).trigger('click') - expect(wrapper.find(valueSelector).text()).toContain('1') - ``` +expect(wrapper.find(valueSelector).text()).toContain('1') +``` - ```js - const valueSelector = '[data-testid=stepper-value]' - const buttonSelector = '[data-testid=increment]' +```js +const valueSelector = '[data-testid=stepper-value]' +const buttonSelector = '[data-testid=increment]' - mount(Stepper, { - props: { - max: 1 - } - }) +mount(Stepper, { + props: { + max: 1 + } +}) - cy.get(valueSelector).should('be.visible').and('contain.text', '0') - .get(buttonSelector).click() - .get(valueSelector).should('contain.text', '1') - ``` +cy.get(valueSelector) + .should('be.visible') + .and('contain.text', '0') + .get(buttonSelector) + .click() + .get(valueSelector) + .should('contain.text', '1') +``` - ```js - const { getByText } = render(Stepper, { - props: { - max: 1 - } - }) +```js +const { getByText } = render(Stepper, { + props: { + max: 1 + } +}) - getByText('0') // // コンポーネント内に "0 "があることを暗黙のうちに評価します +getByText('0') // // コンポーネント内に "0 "があることを暗黙のうちに評価します - const button = getByRole('button', { name: /increment/i }) +const button = getByRole('button', { name: /increment/i }) - // インクリメントボタンにクリックイベントをディスパッチします。 - await fireEvent.click(button) +// インクリメントボタンにクリックイベントをディスパッチします。 +await fireEvent.click(button) - getByText('1') +getByText('1') - await fireEvent.click(button) - ``` +await fireEvent.click(button) +``` @@ -265,6 +292,16 @@ Vitest とブラウザーベースのランナーの主な違いは、スピー - [Cypress](https://www.cypress.io/) は、情報豊富なグラフィカルインターフェース、優れたデバッグ性、組み込みアサーションとスタブ、耐フレーク性（flake-resistance）、スナップショットなどの機能を備えています。また、前述の通り[コンポーネントテスト](https://docs.cypress.io/guides/component-testing/introduction)もサポートしています。Chromium ベースのブラウザー、Firefox、Electron をサポートしています。WebKit のサポートもありますが、実験的機能とされています。Cypress は MIT ライセンスですが、並列化などの一部の機能には Cypress Cloud へのサブスクリプションが必要です。 +
+ + +
+
Testing Sponsor
+
Lambdatest は、AI 支援によるテスト生成機能を備え、主要なブラウザと実機を対象に、E2E、アクセシビリティ、Visual Regression Test を実行するためのクラウドプラットフォームです！
+
+ +
+ ### その他の選択肢 {#other-options-2} - [Nightwatch](https://nightwatchjs.org/) は、[Selenium WebDriver](https://www.npmjs.com/package/selenium-webdriver) をベースとした E2E テストソリューションです。こちらはネイティブモバイルテストを含む、最も広い範囲のブラウザーをサポートしています。Selenium ベースのソリューションは、Playwright や Cypress よりも遅くなります。 diff --git a/src/public/images/lambdatest.svg b/src/public/images/lambdatest.svg new file mode 100644 index 000000000..f4875ee1e --- /dev/null +++ b/src/public/images/lambdatest.svg @@ -0,0 +1,18 @@ + + + + LOGO + Created with Sketch. + + + + + + +