mirror of https://github.com/docker/docs.git
140 lines
4.7 KiB
Markdown
140 lines
4.7 KiB
Markdown
---
|
||
title: Run vue.js tests in a container
|
||
linkTitle: Run your tests
|
||
weight: 40
|
||
keywords: vue.js, vue, test, vitest
|
||
description: Learn how to run your vue.js tests in a container.
|
||
|
||
---
|
||
|
||
## Prerequisites
|
||
|
||
Complete all the previous sections of this guide, starting with [Containerize Vue.js application](containerize.md).
|
||
|
||
## Overview
|
||
|
||
Testing is a critical part of the development process. In this section, you'll learn how to:
|
||
|
||
- Run unit tests using Vitest inside a Docker container.
|
||
- Use Docker Compose to run tests in an isolated, reproducible environment.
|
||
|
||
You’ll use [Vitest](https://vitest.dev) — a blazing fast test runner designed for Vite — together with [@vue/test-utils](https://test-utils.vuejs.org/) to write unit tests that validate your component logic, props, events, and reactive behavior.
|
||
|
||
This setup ensures your Vue.js components are tested in an environment that mirrors how users actually interact with your application.
|
||
|
||
---
|
||
|
||
## Run tests during development
|
||
|
||
`docker-vuejs-sample` application includes a sample test file at location:
|
||
|
||
```console
|
||
$ src/components/__tests__/HelloWorld.spec.ts
|
||
```
|
||
|
||
This test uses Vitest and Vue Test Utils to verify the behavior of the HelloWorld component.
|
||
|
||
---
|
||
|
||
### Step 1: Update compose.yaml
|
||
|
||
Add a new service named `vuejs-test` to your `compose.yaml` file. This service allows you to run your test suite in an isolated containerized environment.
|
||
|
||
```yaml {hl_lines="22-26",linenos=true}
|
||
services:
|
||
vuejs-prod:
|
||
build:
|
||
context: .
|
||
dockerfile: Dockerfile
|
||
image: docker-vuejs-sample
|
||
ports:
|
||
- "8080:8080"
|
||
|
||
vuejs-dev:
|
||
build:
|
||
context: .
|
||
dockerfile: Dockerfile.dev
|
||
ports:
|
||
- "5173:5173"
|
||
develop:
|
||
watch:
|
||
- action: sync
|
||
path: .
|
||
target: /app
|
||
|
||
vuejs-test:
|
||
build:
|
||
context: .
|
||
dockerfile: Dockerfile.dev
|
||
command: ["npm", "run", "test:unit"]
|
||
```
|
||
|
||
The vuejs-test service reuses the same `Dockerfile.dev` used for [development](develop.md) and overrides the default command to run tests with `npm run test`. This setup ensures a consistent test environment that matches your local development configuration.
|
||
|
||
|
||
After completing the previous steps, your project directory should contain the following files:
|
||
|
||
```text
|
||
├── docker-vuejs-sample/
|
||
│ ├── Dockerfile
|
||
│ ├── Dockerfile.dev
|
||
│ ├── .dockerignore
|
||
│ ├── compose.yaml
|
||
│ ├── nginx.conf
|
||
│ └── README.Docker.md
|
||
```
|
||
|
||
### Step 2: Run the tests
|
||
|
||
To execute your test suite inside the container, run the following command from your project root:
|
||
|
||
```console
|
||
$ docker compose run --rm vuejs-test
|
||
```
|
||
|
||
This command will:
|
||
- Start the `vuejs-test` service defined in your `compose.yaml` file.
|
||
- Execute the `npm run test` script using the same environment as development.
|
||
- Automatically remove the container after the tests complete [`docker compose run --rm`](/engine/reference/commandline/compose_run) command.
|
||
|
||
You should see output similar to the following:
|
||
|
||
```shell
|
||
Test Files: 1 passed (1)
|
||
Tests: 1 passed (1)
|
||
Start at: 16:50:55
|
||
Duration: 718ms
|
||
```
|
||
|
||
> [!NOTE]
|
||
> For more information about Compose commands, see the [Compose CLI
|
||
> reference](/reference/cli/docker/compose/_index.md).
|
||
|
||
---
|
||
|
||
## Summary
|
||
|
||
In this section, you learned how to run unit tests for your Vue.js application inside a Docker container using Vitest and Docker Compose.
|
||
|
||
What you accomplished:
|
||
- Created a `vuejs-test` service in `compose.yaml` to isolate test execution.
|
||
- Reused the development `Dockerfile.dev` to ensure consistency between dev and test environments.
|
||
- Ran tests inside the container using `docker compose run --rm vuejs-test`.
|
||
- Ensured reliable, repeatable testing across environments without depending on your local machine setup.
|
||
|
||
---
|
||
|
||
## Related resources
|
||
|
||
Explore official references and best practices to sharpen your Docker testing workflow:
|
||
|
||
- [Dockerfile reference](/reference/dockerfile/) – Understand all Dockerfile instructions and syntax.
|
||
- [Best practices for writing Dockerfiles](/develop/develop-images/dockerfile_best-practices/) – Write efficient, maintainable, and secure Dockerfiles.
|
||
- [Compose file reference](/compose/compose-file/) – Learn the full syntax and options available for configuring services in `compose.yaml`.
|
||
- [`docker compose run` CLI reference](/reference/cli/docker/compose/run/) – Run one-off commands in a service container.
|
||
---
|
||
|
||
## Next steps
|
||
|
||
Next, you’ll learn how to set up a CI/CD pipeline using GitHub Actions to automatically build and test your Vue.js application in a containerized environment. This ensures your code is validated on every push or pull request, maintaining consistency and reliability across your development workflow.
|