Create react app example
Closed this issue · 10 comments
Hi!
Trying to play with knapsack-pro/jest in the project that was bootstrapped by the create-react-app tool and encountered an issue that jest cannot parse my files. Seems like it cannot read jest config provided by CRA.
Would be nice if you can create an example project that uses clean CRA (ideally with typescript) + knapsack-pro. CRA has become a very convenient tool that react community use, it would be much appreciated to have at least a docs section regarding it.
Thanks in advance!
Hi @markivancho
Could you share what error do you see in your CRA app?
Typically if tests are not stored in the default location (KNAPSACK_PRO_TEST_FILE_PATTERN="{**/__tests__/**/*.js?(x),**/?(*.)(spec|test).js?(x)}") then you need to tell @knapsack-pro/jest where to find your tests.
You may need to set KNAPSACK_PRO_TEST_FILE_PATTERN. See more examples https://knapsackpro.com/faq/question/how-to-run-tests-only-from-specific-directory-in-jest
Here is an example of how to load the Jest config file: https://knapsackpro.com/faq/question/how-to-use-jest-config-file-with-knapsack-pro-jest
Please let me know if this helps or please share the error you see.
Is your project open source available to look at or are you configuring this on your private company project? You can reach our support if you can't share sensitive data here.
Here is an example project for Jest that I use for testing purpose.
@knapsack-pro/jest is added to package.json https://github.com/KnapsackPro/jest-example-test-suite/blob/0c87c1d341672b8b06c7318c1f8a0f2c9e5c51bf/package.json#L8
Script to run tests https://github.com/KnapsackPro/jest-example-test-suite/blob/0c87c1d341672b8b06c7318c1f8a0f2c9e5c51bf/bin/knapsack_pro_jest#L17
Instead of using KNAPSACK_PRO_CI_NODE_TOTAL and KNAPSACK_PRO_CI_NODE_INDEX the env vars can be auto-read from your CI provider env vars.
@ArturT I've created clean repo with reproduce and used your script to run tests
The issue I've encountered is probably transpilation process, I've tried to fix it by myself with config/package.json changes but seems like I'm falling into a rabbit hole)
As far as I understand, CRA encapsulates a lot of configs by itself and the knapsack test command cannot use them. Maybe you can take a look at it.
I've used your repo on my machine. I was using the master branch I had this error after running bin/knapsack_pro_jest:
FAIL src/App.test.js
● Test suite failed to run
SyntaxError: /Users/artur/Documents/github/knapsack-pro/knapsack-for-js/knapsack-app/src/App.test.js: Support for the experimental syntax 'jsx' isn't currently enabled (5:10):
3 |
4 | test('renders learn react link', () => {
> 5 | render(<App />);
| ^
6 | const linkElement = screen.getByText(/learn react/i);
7 | expect(linkElement).toBeInTheDocument();
8 | });
Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
at Parser._raise (node_modules/@babel/parser/src/parser/error.js:97:45)
at Parser.raiseWithData (node_modules/@babel/parser/src/parser/error.js:92:17)
at Parser.expectOnePlugin (node_modules/@babel/parser/src/parser/util.js:164:18)
at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1176:18)
at Parser.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:588:23)
at Parser.parseUpdate (node_modules/@babel/parser/src/parser/expression.js:568:21)
at Parser.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:535:23)
at Parser.parseExprOps (node_modules/@babel/parser/src/parser/expression.js:349:23)
at Parser.parseMaybeConditional (node_modules/@babel/parser/src/parser/expression.js:314:23)
at Parser.parseMaybeAssign (node_modules/@babel/parser/src/parser/expression.js:269:21)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 2.521 s
Ran all test suites within paths "src/App.test.js".
When I was using your pull request https://github.com/markivancho/knapsack-app/pull/1/files then the test is passing green correctly.
$ bin/knapsack_pro_jest
2021-11-15T19:11:15.727Z [@knapsack-pro/core] info: POST https://api-staging.knapsackpro.com/v1/queues/queue
2021-11-15T19:11:16.225Z [@knapsack-pro/core] info: 200 OK
Request ID:
aa556e83-d26f-4cee-9acf-3a67f9e0a348
Response body:
{
queue_name: '31:a8871531805e43266d54d23224285af1:queue-must-be-initialized-first',
message: 'A queue with a list of test files does not exist on the API side yet. If you see this message, everything works as expected. Now Knapsack Pro client will initialize a queue on the API side with a list of test files you want to run. The request to initialize the queue will have attributes like can_initialize_queue=true, attempt_connect_to_queue=false, and test_files, etc.',
code: 'ATTEMPT_CONNECT_TO_QUEUE_FAILED'
}
2021-11-15T19:11:16.227Z [@knapsack-pro/core] info: POST https://api-staging.knapsackpro.com/v1/queues/queue
2021-11-15T19:11:16.623Z [@knapsack-pro/core] info: 200 OK
Request ID:
5c1791ad-bc5e-417d-900b-0a4ed0aca694
Response body:
{
queue_name: '31:a8871531805e43266d54d23224285af1',
build_subset_id: null,
test_files: [ { path: 'src/App.test.js', time_execution: null } ]
}
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
PASS src/App.test.js
✓ renders learn react link (34 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 3.605 s
Ran all test suites within paths "src/App.test.js".
2021-11-15T19:11:22.003Z [@knapsack-pro/core] info: POST https://api-staging.knapsackpro.com/v1/queues/queue
2021-11-15T19:11:22.261Z [@knapsack-pro/core] info: 200 OK
Request ID:
a6d15c46-3b4d-4f1e-b129-bfa9b9d97377
Response body:
{
queue_name: '31:a8871531805e43266d54d23224285af1',
build_subset_id: null,
test_files: []
}
2021-11-15T19:11:22.262Z [@knapsack-pro/core] info: POST https://api-staging.knapsackpro.com/v1/build_subsets
2021-11-15T19:11:22.588Z [@knapsack-pro/core] info: 201 Created
Request ID:
f0c09090-0ee0-49e0-b33a-cdef32d6cc38
Response body:
''
I recommend using our production API endpoint (by not defining the endpoint URL). You should also use production API token that you can find in your user dashboard after you sign up at https://knapsackpro.com
This script https://github.com/markivancho/knapsack-app/blob/5f331f77effe83372425703b09490724608d8946/bin/knapsack_pro_jest#L19 could look like:
#!/bin/bash
# this is temporary only for local testing purposes. It should not be defined when running on CI.
# the value will be auto-read from CI provider env vars
# CI_BUILD_ID=$(openssl rand -base64 32)
TEST_FILE_PATTERN="{**/*.test.js?(x),**/?(*.)(test).js?(x)}"
LOG_LEVEL=info
# LOG_LEVEL=debug
KNAPSACK_PRO_TEST_SUITE_TOKEN_JEST=use_your_API_token \
KNAPSACK_PRO_LOG_LEVEL=$LOG_LEVEL \
KNAPSACK_PRO_CI_NODE_BUILD_ID=$CI_BUILD_ID \
KNAPSACK_PRO_CI_NODE_TOTAL=${2:-2} \
KNAPSACK_PRO_CI_NODE_INDEX=${1:-0} \
KNAPSACK_PRO_TEST_FILE_PATTERN=$TEST_FILE_PATTERN \
$(npm bin)/knapsack-pro-jestExample for CI build with number 123:
- When you run locally
CI_BUILD_ID=123 bin/knapsack_pro_jest 0it simulates the scenario to run tests assigned to CI node index 0. - When you run locally
CI_BUILD_ID=123 bin/knapsack_pro_jest 1it simulates scenario to run tests assigned to CI node index 1.
Both commands should be started at a similar time to consume from the Queue API the same set of tests (you need more test files in the project to fill the queue with test files).
If the queue is consumed then no more tests can be run. You need to bump CI build ID to run another CI build.
Or use KNAPSACK_PRO_FIXED_QUEUE_SPLIT=true to allow retiring tests for the same CI build ID. (more details described in step 2 here https://github.com/KnapsackPro/knapsack-pro-jest#configuration-steps ).
The issue I've encountered is probably transpilation process
Do you see any other issues? It looks like you already have working tests in the pull request: https://github.com/markivancho/knapsack-app/pull/1/files
You have only 1 test file src/App.test.js in your project. @knapsack-pro/jest split tests by test files. You need more test files in order to run them in parallel CI nodes (parallel jobs/machines).
What is your CI provider? I recommend running tests on CI because @knapsack-pro/jest is designed for splitting tests on parallel machines (not to run tests parallel on a single machine).
As far as I understand, CRA encapsulates a lot of configs by itself and the knapsack test command cannot use them. Maybe you can take a look at it.
@knapsack-pro/jest runs Jest CLI under the hood. Whatever can be passed as config or option argument to the Jest CLI then Jest can handle and run it.
More about Jest CLI options:
https://jestjs.io/docs/cli
https://knapsackpro.com/faq/question/how-to-pass-command-line-options-to-jest
This is how @knapsack-pro/jest runs Jest CLI https://github.com/KnapsackPro/knapsack-pro-jest/blob/1b43784d87f874ee270030fa9063e752ba61695e/src/knapsack-pro-jest.ts#L46
Here you can find low-level details about the implementation of @knapsack-pro/jest and Jest
https://docs.knapsackpro.com/2020/how-to-build-native-integration-with-knapsack-pro-api-to-run-tests-in-parallel-for-any-test-runner-testing-framework
As far as I understand, CRA encapsulates a lot of configs
Do you know what are these configs that are needed to run your project? Do you have a production project you would like to test @knapsack-pro/jest with?
@ArturT thanks for your efforts.
I've digged a bit more into this, and it looks like CRA runs jest through this command and here it passes default config which suites all my production needs.
Here is logic than defines what config looks like, as you can see there are a bunch of transforms, mappers, etc...
Currently I'm looking for a possibility to pass that config to knapsack, this should solve all the issues
If you have the Jest config file defined on the disk you can pass the config path to the Jest process executed by @knapsack-pro/jest.
$(npm bin)/knapsack-pro-jest --config=jest.config.e2e.js
https://knapsackpro.com/faq/question/how-to-use-jest-config-file-with-knapsack-pro-jest
Please let me know if you manage to run tests correctly.
@markivancho - did you wind up finding a fix for this CRA+knapsack dance (asking for a friend :))
I opened a PR with a Create React App app and @knapsack-pro/jest.
Could you please give it a try and let me know if that solves your issues?
I added documentation on how to set up Knapsack Pro with CRA and merged the Create React App example repository.