-
|
I have Cypress Typescript setup that works fine on host but same thing fails in Docker container. I suspect it's something about default Webpack setup in Cypress and importing files from parent folders but I am not sure, I don't understand it completely. Inside container I have Cypress
You can see my folder structure here:
tsconfig.json {
"compilerOptions": {
"baseUrl": "..",
"esModuleInterop": true,
"target": "es5",
"lib": ["es5", "dom"],
"types": ["node", "cypress", "@testing-library/cypress"]
},
"include": ["cypress/**/*.ts", "../lib-client/constants.ts"] // note this file from parent dir
}Dockerfile.e2e # this Dockerfile is needed because of @testing-library/cypress
# import in tests-e2e/cypress/support/commands.js
# must be in root to include prisma
# must include all imports from seed: prisma, bcryptjs, faker, next.js...
# 2x smaller size than 16.3 which is in project
FROM cypress/base:16.14.2
WORKDIR /app
# dependencies will be installed only if the package files change
COPY tests-e2e/package.json tests-e2e/yarn.lock ./
# add prisma and generate client for seed
COPY prisma ./prisma
# by setting CI environment variable we switch the Cypress install messages
# to small "started / finished" and avoid 1000s of lines of progress messages
# https://github.com/cypress-io/cypress/issues/1243
ENV CI=1
RUN yarn install --frozen-lockfile
# dont clean yarn cache
RUN npx prisma generate
RUN rm -rf prisma
# copy imported files in tests from next.js app
COPY prisma/seed.js ./prisma/seed.js
COPY lib-client/constants.ts ./lib-client/constants.ts
# verify that Cypress has been installed correctly.
# running this command separately from "cypress run" will also cache its result
# to avoid verifying again when running the tests
RUN npx cypress verify
docker-compose.test.yml npb-e2e:
image: npb-e2e
container_name: npb-e2e
build:
# must be in root to include prisma
context: .
dockerfile: Dockerfile.e2e
depends_on:
- npb-app-test
environment:
- CYPRESS_baseUrl=http://npb-app-test:3001
# only db_url for seed
env_file:
- .env.test.local
command: bash -c 'cd /app/tests-e2e && npx wait-on http://npb-app-test:3001 && npx cypress run'
# only tests can be edited without rebuilding
# imports from next.js app are copied in Dockerfile
# app is prod built anyway
volumes:
- ./tests-e2e/cypress:/app/tests-e2e/cypress
- ./tests-e2e/cypress.json:/app/tests-e2e/cypress.json
networks:
- internal-testThe error I get: It happens in this tests-e2e/cypress/integration/home.test.ts file: /// <reference types="cypress" />
//
import { Routes } from 'lib-client/constants'; // this import from parent folder probably breaks it
const fakeUser = require('../fixtures/fakeUser');
const cookieName = Cypress.env('COOKIE_NAME');
describe('Home page', () => {I believe this import from parent folder causes the error If you need more info it happens in this project, relevant code is in https://github.com/nemanjam/nextjs-prisma-boilerplate It's not easy to debug this, I need to rebuild container for each attempt. I could use help with this, I went trough all docs and examples but didn't find complete example with both Typescript and Docker. Do I need to tweak preprocessor settings, and why same thing works on host OS and it fails only in Docker, the only difference is Cypress invoking command I think. Host: "cypress": "cypress open --project ./tests-e2e",
"test:e2e": "start-server-and-test start:e2e 3001 cypress",Docker: command: bash -c 'cd /app/tests-e2e && npx wait-on http://npb-app-test:3001 && npx cypress run' |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
The solution for this is to have two extended Dockerfile.e2e # MUST repeat everything from host
# /app/package.json
# /app/tsconfig.json
# /app/tests-e2e/cypress.json
# /app/tests-e2e/tsconfig.json
COPY tests-e2e/package.json tests-e2e/yarn.lock ./
# important: tsconfig.json parent/child same like on host
COPY tsconfig.json ./
COPY tests-e2e/tsconfig.json ./tests-e2e/tsconfig.jsontests-e2e/tsconfig.json tests-e2e/package.json "scripts": {
"test": "wait-on $CYPRESS_baseUrl && cypress run --project ./tests-e2e"
},
"private": true,
"dependencies": {
"@faker-js/faker": "^6.2.0",
"@prisma/client": "^3.13.0",
"@testing-library/cypress": "^8.0.2",
"bcryptjs": "^2.4.3",
"cypress": "^9.6.1",
"next": "^12.1.5",
"prisma": "^3.13.0",
"wait-on": "^6.0.1",
"typescript": "^4.6.3"
}docker-compose.e2e.yml command: yarn test
volumes:
- ./tests-e2e/cypress:/app/tests-e2e/cypress
- ./tests-e2e/cypress.json:/app/tests-e2e/cypress.jsonThis error log is misleading, that is why this error was more difficult to resolve than it should be. Error should be "tsconfig.json file is not found". |
Beta Was this translation helpful? Give feedback.
The solution for this is to have two extended
tsconfig.json, same like on host. Otherwise I would have to have doublepackage.jsonandyarn.lock, one for host, another to install Cypress with dependencies in container. Option with 2tsconfig.jsonandcypress run --projectseems more elegant.Dockerfile.e2e
tests-e2e/tsconfig.json