Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
[Feature] experimental-ct-react with javascript
See original GitHub issueI’m looking for an example of javascript react component testing, similar to https://playwright.dev/docs/test-components
Here is an example setup, and the error it produces
# syntax=docker/dockerfile-upstream:1-labs
FROM node:16.15.0-bullseye-slim
# Usage
# https://github.com/moby/moby/issues/16058#issuecomment-881901519
# 1. DOCKER_BUILDKIT=1 docker build -t playwright .
# Install playwrigth deps https://github.com/microsoft/playwright/issues/3167#issuecomment-1088152322
RUN <<-EORUN
cat <<'EOF' > /tmp/playwright-install-deps.sh
apt-get update
apt-get install -y wget
packages=(
"http://archive.ubuntu.com/ubuntu/pool/main/libj/libjpeg-turbo/libjpeg-turbo8_2.0.3-0ubuntu1_amd64.deb"
"http://archive.ubuntu.com/ubuntu/pool/main/i/icu/libicu66_66.1-2ubuntu2_amd64.deb"
"http://ftp.de.debian.org/debian/pool/main/e/enchant/libenchant1c2a_1.6.0-11.1+b1_amd64.deb"
"http://ftp.de.debian.org/debian/pool/non-free/f/fonts-ubuntu/fonts-ubuntu_0.83-4_all.deb"
"http://ftp.de.debian.org/debian/pool/non-free/f/fonts-ubuntu/ttf-ubuntu-font-family_0.83-4_all.deb"
)
for package in ${packages[@]}; do
wget -O /tmp/$(basename $package) $package
apt-get install -fy /tmp/$(basename $package)
done
rm -rf /tmp/*deb
rm -rf /var/lib/apt/lists/*
EOF
EORUN
RUN bash /tmp/playwright-install-deps.sh
RUN <<-EORUN
npm install create-react-app
npx create-react-app playwright-components-react
cd playwright-components-react
rm -f src/App.test.js
TEST_OPTIONS='{"language":"JavaScript","framework":"react","installPlaywrightDependencies":"true"}' npm init playwright@latest -- --ct
EORUN
RUN <<-EORUN
cd playwright-components-react
cat <<'EOF' > src/App.spec.mjs
import { test, expect } from '@playwright/experimental-ct-react';
import App from './App';
test.use({ viewport: { width: 500, height: 500 } });
test('should work', async ({ mount }) => {
const component = await mount(<App></App>);
await expect(component).toContainText('Learn React');
});
EOF
npm run test-ct
EORUN
DOCKER_BUILDKIT=1 docker build -t playwright .
[+] Building 4.5s (14/14) FINISHED
=> [internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 1.85kB 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> resolve image config for docker.io/docker/dockerfile-upstream:1-labs 1.3s
=> [auth] docker/dockerfile-upstream:pull token for registry-1.docker.io 0.0s
=> CACHED docker-image://docker.io/docker/dockerfile-upstream:1-labs@sha256:b50ad4af81d1c76ab7c0e1ffc216909e7adc23e99910243e1c88331c2a8ef52d 0.0s
=> [internal] load build definition from Dockerfile 0.0s
=> [internal] load .dockerignore 0.0s
=> [internal] load metadata for docker.io/library/node:16.15.0-bullseye-slim 0.8s
=> [auth] library/node:pull token for registry-1.docker.io 0.0s
=> [1/5] FROM docker.io/library/node:16.15.0-bullseye-slim@sha256:14af3fc10c3b85be74621ae6f0066ee4b2ab1ae1d6c0c87e0ada9ca193346071 0.0s
=> CACHED [2/5] RUN <<-EORUN (cat <<'EOF' > /tmp/playwright-install-deps.sh...) 0.0s
=> CACHED [3/5] RUN bash /tmp/playwright-install-deps.sh 0.0s
=> CACHED [4/5] RUN <<-EORUN (npm install create-react-app...) 0.0s
=> ERROR [5/5] RUN <<-EORUN (cd playwright-components-react...) 1.8s
------
> [5/5] RUN <<-EORUN (cd playwright-components-react...):
#14 0.977
#14 0.977 > playwright-components-react@0.1.0 test-ct
#14 0.977 > playwright test -c playwright-ct.config.js
#14 0.977
#14 1.695
#14 1.695 Running 0 test using 0 worker
#14 1.696
#14 1.697
#14 1.697 SyntaxError: Unexpected token '<'
#14 1.697
#14 1.697
#14 1.697
#14 1.697 =================
#14 1.697 no tests found.
#14 1.714 To open last HTML report run:
#14 1.714
#14 1.714 npx playwright show-report
#14 1.714
------
executor failed running [/bin/sh -c cd playwright-components-react
cat <<'EOF' > src/App.spec.mjs
import { test, expect } from '@playwright/experimental-ct-react';
import App from './App';
test.use({ viewport: { width: 500, height: 500 } });
test('should work', async ({ mount }) => {
const component = await mount(<App></App>);
await expect(component).toContainText('Learn React');
});
EOF
npm run test-ct
]: exit code: 1
On the other hand, when src/App.spec.tsx is used instead of src/App.spec.mjs then the error is
DOCKER_BUILDKIT=1 docker build -t playwright .
[+] Building 401.2s (14/14) FINISHED
=> [internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 1.85kB 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> resolve image config for docker.io/docker/dockerfile-upstream:1-labs 1.2s
=> [auth] docker/dockerfile-upstream:pull token for registry-1.docker.io 0.0s
=> CACHED docker-image://docker.io/docker/dockerfile-upstream:1-labs@sha256:b50ad4af81d1c76ab7c0e1ffc216909e7adc23e99910243e1c88331c2a8ef52d 0.0s
=> [internal] load .dockerignore 0.0s
=> [internal] load build definition from Dockerfile 0.0s
=> [internal] load metadata for docker.io/library/node:16.15.0-bullseye-slim 0.7s
=> [auth] library/node:pull token for registry-1.docker.io 0.0s
=> CACHED [1/5] FROM docker.io/library/node:16.15.0-bullseye-slim@sha256:14af3fc10c3b85be74621ae6f0066ee4b2ab1ae1d6c0c87e0ada9ca193346071 0.0s
=> [2/5] RUN <<-EORUN (cat <<'EOF' > /tmp/playwright-install-deps.sh...) 0.7s
=> [3/5] RUN bash /tmp/playwright-install-deps.sh 35.0s
=> [4/5] RUN <<-EORUN (npm install create-react-app...) 359.9s
=> ERROR [5/5] RUN <<-EORUN (cd playwright-components-react...) 3.3s
------
> [5/5] RUN <<-EORUN (cd playwright-components-react...):
#14 1.335
#14 1.335 > playwright-components-react@0.1.0 test-ct
#14 1.335 > playwright test -c playwright-ct.config.js
#14 1.335
#14 2.538
#14 2.538 Running 3 tests using 2 workers
#14 2.539
#14 2.878 vite v2.9.9 building for production...
#14 2.957 transforming...
#14 3.010 ✓ 3 modules transformed.
#14 3.011 [rollup-plugin-dynamic-import-variables] Unexpected token (6:4)
#14 3.011 file: /playwright-components-react/src/App.js:6:4
#14 3.031
#14 3.031 SyntaxError: Unexpected token (6:4)
#14 3.031
#14 3.031 at node_modules/rollup/dist/shared/rollup.js:19722
#14 3.031
#14 3.031 19720 | var loc = getLineInfo(this.input, pos);
#14 3.031 19721 | message += " (" + loc.line + ":" + loc.column + ")";
#14 3.031 > 19722 | var err = new SyntaxError(message);
#14 3.031 | ^
#14 3.031 19723 | err.pos = pos; err.loc = loc; err.raisedAt = this.pos;
#14 3.031 19724 | throw err
#14 3.031 19725 | };
#14 3.031
#14 3.031 at Parser.pp$4.raise (/playwright-components-react/node_modules/rollup/dist/shared/rollup.js:19722:13)
#14 3.031 at Parser.pp$9.unexpected (/playwright-components-react/node_modules/rollup/dist/shared/rollup.js:17016:8)
#14 3.031 at Parser.pp$5.parseExprAtom (/playwright-components-react/node_modules/rollup/dist/shared/rollup.js:19097:10)
#14 3.031 at Parser.pp$5.parseExprSubscripts (/playwright-components-react/node_modules/rollup/dist/shared/rollup.js:18889:19)
#14 3.031 at Parser.pp$5.parseMaybeUnary (/playwright-components-react/node_modules/rollup/dist/shared/rollup.js:18855:17)
#14 3.031 at Parser.pp$5.parseExprOps (/playwright-components-react/node_modules/rollup/dist/shared/rollup.js:18782:19)
#14 3.031 at Parser.pp$5.parseMaybeConditional (/playwright-components-react/node_modules/rollup/dist/shared/rollup.js:18765:19)
#14 3.031 at Parser.pp$5.parseMaybeAssign (/playwright-components-react/node_modules/rollup/dist/shared/rollup.js:18732:19)
#14 3.031 at Parser.pp$5.parseParenAndDistinguishExpression (/playwright-components-react/node_modules/rollup/dist/shared/rollup.js:19193:28)
#14 3.031 at Parser.pp$5.parseExprAtom (/playwright-components-react/node_modules/rollup/dist/shared/rollup.js:19056:41)
#14 3.031 at Parser.pp$5.parseExprSubscripts (/playwright-components-react/node_modules/rollup/dist/shared/rollup.js:18889:19)
#14 3.031 at Parser.pp$5.parseMaybeUnary (/playwright-components-react/node_modules/rollup/dist/shared/rollup.js:18855:17)
#14 3.031 at Parser.pp$5.parseExprOps (/playwright-components-react/node_modules/rollup/dist/shared/rollup.js:18782:19)
#14 3.031 at Parser.pp$5.parseMaybeConditional (/playwright-components-react/node_modules/rollup/dist/shared/rollup.js:18765:19)
#14 3.031 at Parser.pp$5.parseMaybeAssign (/playwright-components-react/node_modules/rollup/dist/shared/rollup.js:18732:19)
#14 3.032
#14 3.032 TypeError: Cannot read properties of undefined (reading 'httpServer')
#14 3.032
#14 3.033 3 skipped
#14 3.118
#14 3.119 To open last HTML report run:
#14 3.119
#14 3.119 npx playwright show-report
#14 3.119
------
executor failed running [/bin/sh -c cd playwright-components-react
cat <<'EOF' > src/App.spec.tsx
import { test, expect } from '@playwright/experimental-ct-react';
import App from './App';
test.use({ viewport: { width: 500, height: 500 } });
test('should work', async ({ mount }) => {
const component = await mount(<App></App>);
await expect(component).toContainText('Learn React');
});
EOF
npm run test-ct
]: exit code: 1
Here is package.json
{
"name": "playwright-components-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"test-ct": "playwright test -c playwright-ct.config.js"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@playwright/experimental-ct-react": "^1.22.0"
}
}
Issue Analytics
- State:
- Created a year ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Introducing Concurrent Mode (Experimental) - React
Concurrent Mode is a set of new features that help React apps stay responsive and gracefully adjust to the user's device capabilities and...
Read more >Experimental React - Concurrent Mode is Coming - GrapeCity
In this article, we looked at React's experimental features, Concurrent Mode and Suspense. Using Concurrent Mode, React.js keeps the user ...
Read more >use(): the React new experimental hook - Xebia
React team and the JavaScript community are discussing a hook called use and I see a lot of hype about this new feature....
Read more >How to use React's experimental new Profiler feature - Medium
React 16.4.0 was recently released! And it's times like this that you realize how much of a JavaScript nerd you are for getting ......
Read more >Experimental React: Using Suspense for data fetching
fetchData.js ... The first thing we do here is import the wrapPromise function we just created, and then define a function, fetchData ....
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
This should be fixed as of https://github.com/microsoft/playwright/commit/9440f52b888f2ddeb83e62f473a184b9f7f96435. Run
to give it a try.
For reference here is the link explaining the js -> jsx behavior https://github.com/microsoft/playwright/issues/14298