Closed6
create-react-appを試してみる
以下のGetting Startedに従ってみる。
$ npx create-react-app my-app
以下のように聞かれて、インストールが始まる。
Need to install the following packages:
create-react-app@5.0.1
Ok to proceed? (y) y
my-app
というディレクトリが作成される。
$ cd my-app
package.json
には以下のように書かれている。
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.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"
},
"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"
]
}
}
とりあえずgit first commitする。
$ git init .
$ git add -A
$ git status -s
A .gitignore
A README.md
A package-lock.json
A package.json
A public/favicon.ico
A public/index.html
A public/logo192.png
A public/logo512.png
A public/manifest.json
A public/robots.txt
A src/App.css
A src/App.js
A src/App.test.js
A src/index.css
A src/index.js
A src/logo.svg
A src/reportWebVitals.js
A src/setupTests.js
$ git commit -m 'first commit'
Getting Startedにしたがって npm start
$ npm start
3000番ポートが開くらしい。
自分の環境の都合上ポート番号を8080にしておきたいので、以下のようにする。
$ PORT=8080 npm start
こんな画面になる。
npm run start
じゃなくて npm start
だけでいいんだ・・・
ビルドしてみる。
$ npm run build
こういうファイルが生成された。
$ tree build
build
├── asset-manifest.json
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── robots.txt
└── static
├── css
│ ├── main.073c9b0a.css
│ └── main.073c9b0a.css.map
├── js
│ ├── 787.28cb0dcd.chunk.js
│ ├── 787.28cb0dcd.chunk.js.map
│ ├── main.46f5c8f5.js
│ ├── main.46f5c8f5.js.LICENSE.txt
│ └── main.46f5c8f5.js.map
└── media
└── logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg
public/index.html
には <script>
要素がないけど、 build/index.html
には <script>
が入っているし、HTMLコメントもなくなって改行もなくなる。HTMLファイル自体もビルドされるようだ。
npm run test
を実行すると npm run start
と同じく待機状態になる。
ファイルが更新されると、自動でテストコードが実行される。
テストに成功した時の表示例
PASS src/App.test.js
✓ renders learn react link (47 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 2.493 s
Ran all test suites related to changed files.
Watch Usage: Press w to show more.One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.
babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.
テストに失敗したときの表示例
4 | test('renders learn react link', () => {
5 | render(<App />);
> 6 | const linkElement = screen.getByText(/learn react/i);
| ^
7 | expect(linkElement).toBeInTheDocument();
8 | });
9 |
at Object.getElementError (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/config.js:37:19)
at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
at getByText (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:95:19)
at Object.<anonymous> (src/App.test.js:6:30)
at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
at runJest (node_modules/@jest/core/build/runJest.js:404:19)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 0.827 s, estimated 1 s
Ran all test suites related to changed files.
npm run start じゃなくて npm start だけでいいんだ・・・
この件、
package.json
の start
を試しに xstart
などとすると、 npm xstart
では動かない。
$ npm xstart
Unknown command: "xstart"
当然 npm run xstart
とすれば動く。
$ npm run xstart
...
npm start
でももちろん動かない。
$ npm start
npm ERR! Missing script: "start"
start
だけ特別扱いなのかも。
このスクラップは2023/07/07にクローズされました