Multiple error messages at various stages of following the Jasmine install instructions with a new React app (with suggested solutions included)

richiethomas commented 3 years ago

Background:

Node version: 14.15.2
Jasmine version: 3.9.0

I'm trying to follow along to the Jasmine install instructions for a brand-new React app. I run npm create-react-app teardown3. Then I begin following the aforementioned instructions:

Using NPM (instead of yarn as mentioned in the instructions), I install the following dependencies:

npm install --save-dev @babel/core \
                 @babel/register \
                 babel-preset-react-app \
                 cross-env \
                 jsdom \
                 jasmine

After npm run jasmine init failed (npm ERR! missing script: jasmine), I ran jasmine init by itself.
I created spec/helpers/babel.js and added the following code:
```
require('@babel/register');
```
I added the following code to package.json, at the same level of nesting as devDependencies, browserList, etc.:
```
"babel": {
"presets": ["react-app"]
}
```
I created spec/helpers/jsdom.js and added the following:
```
import {JSDOM} from 'jsdom';
```

const dom = new JSDOM(''); global.document = dom.window.document; global.window = dom.window; global.navigator = dom.window.navigator;

 - I replaced the following in `spec/support/jasmine.json`:

"helpers": [ "helpers/*/.?(m)js" ],

...with the following:

"helpers": [ "helpers/babel.js", "helpers/*/.js" ],

 - I replaced the following `"test"` script in `package.json`:

"test": "react-scripts test",

...with the following:

"test": "cross-env NODE_ENV=test jasmine",

 - Next I ran `npm install --save-dev ignore-styles`.

 - Then I created `spec/helpers/exclude.js` and added the following:

import 'ignore-styles';


This is the last required step, and running `npm test` at this point results in a "successful" test run:

$ npm test

teardown3@0.1.0 test /Users/richiethomas/Desktop/Workspace/temp_react/teardown3 cross-env NODE_ENV=test jasmine

Randomized with seed 22274 Started F

Failures: 1) foo works Message: Expected true to equal false. Stack: Error: Expected true to equal false. at at UserContext. (/Users/richiethomas/Desktop/Workspace/temp_react/teardown3/spec/foo.spec.js:5:18) at

1 spec, 1 failure Finished in 0.01 seconds Randomized with seed 22274 (jasmine --random=true --seed=22274) npm ERR! Test failed. See above for more details.


Note that the test I wrote (located in `spec/foo.spec.js`) was purposely designed to fail:

import { render, screen } from '@testing-library/react';

describe('foo', () => { it('works', () => { expect(true).toEqual(false); }) })


However, when I move on to the optional steps, I run into problems.  In `spec/support/jasmine.json`, I change this:

{ "spec_dir": "spec", "spec_files": [ "*/[sS]pec.?(m)js" ], "helpers": [ "helpers/*/.?(m)js" ], "stopSpecOnExpectationFailure": false, "random": true }

...to this:

{ "spec_dir": "src", "spec_files": [ "/.test." ], "helpers": [ "../spec/helpers/babel.js", "../spec/helpers//*.js" ], "stopSpecOnExpectationFailure": false, "random": true }


Since I changed the value of `spec_dir`, it's now going to run a new test file, which is located in `src/App.test.js`.  It looks like so:

import { render, screen } from '@testing-library/react'; import App from './App';

test('renders learn react link', () => { render(); const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); });


When I re-run `npm test`, I get the following error:

$ npm test

teardown3@0.1.0 test /Users/richiethomas/Desktop/Workspace/temp_react/teardown3 cross-env NODE_ENV=test jasmine

ReferenceError: test is not defined at Object. (/Users/richiethomas/Desktop/Workspace/temp_react/teardown3/src/App.test.js:4:1) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Module._compile (/Users/richiethomas/Desktop/Workspace/temp_react/teardown3/node_modules/pirates/lib/index.js:99:24) at Module._extensions..js (internal/modules/cjs/loader.js:1092:10) at Object.newLoader [as .js] (/Users/richiethomas/Desktop/Workspace/temp_react/teardown3/node_modules/pirates/lib/index.js:104:7) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module.load (internal/modules/cjs/loader.js:769:14) at Module.require (internal/modules/cjs/loader.js:952:19) at require (internal/modules/cjs/helpers.js:88:18) at Loader.requireShim [as require] (/Users/richiethomas/Desktop/Workspace/temp_react/teardown3/node_modules/jasmine/lib/loader.js:35:3) npm ERR! Test failed. See above for more details.

I figured the problem was on line 4, i.e. `test('renders learn react link', () => {`, so I changed `test` to `describe` and re-ran `npm test`.  Then I got the following error:

$ npm test

teardown3@0.1.0 test /Users/richiethomas/Desktop/Workspace/temp_react/teardown3 cross-env NODE_ENV=test jasmine

Randomized with seed 62199 Started

Suite error: renders learn react link Message: ReferenceError: React is not defined Stack: ReferenceError: React is not defined at Suite. (/Users/richiethomas/Desktop/Workspace/temp_react/teardown3/src/App.test.js:5:10) at at Object. (/Users/richiethomas/Desktop/Workspace/temp_react/teardown3/src/App.test.js:4:1) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Module._compile (/Users/richiethomas/Desktop/Workspace/temp_react/teardown3/node_modules/pirates/lib/index.js:99:24) at Module._extensions..js (internal/modules/cjs/loader.js:1092:10) at Object.newLoader [as .js] (/Users/richiethomas/Desktop/Workspace/temp_react/teardown3/node_modules/pirates/lib/index.js:104:7) at Module.load (internal/modules/cjs/loader.js:928:32) No specs found Finished in 0.004 seconds Randomized with seed 62199 (jasmine --random=true --seed=62199) npm ERR! Test failed. See above for more details.


Re-running `npm test` gives me the same `React is not defined` error again, but this time for `App.js` instead of `App.test.js`:

Suite error: renders learn react link Message: ReferenceError: React is not defined Stack: ReferenceError: React is not defined at App (/Users/richiethomas/Desktop/Workspace/temp_react/teardown3/src/App.js:5:3) ...


I add `import React from 'react';` to the top of `App.js`, and re-run the spec.  I get the following:

Suite error: renders learn react link Message: Error: 'expect' was used when there was no current spec, this could be because an asynchronous test timed out Stack: Error: 'expect' was used when there was no current spec, this could be because an asynchronous test timed out at at Suite. (/Users/richiethomas/Desktop/Workspace/temp_react/teardown3/src/App.test.js:9:3)


After some Googling, I see that this error usually happens when an `expect` statement isn't wrapped inside an `it` block.  I add an `it` block, making the test look like so:

import React from 'react'; import { render, screen } from '@testing-library/react'; import App from './App';

describe('renders learn react link', () => { it('runs the test', () => { render(); const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); }) });


I re-run the spec and get the following error:

Failures: 1) renders learn react link runs the test Message: TypeError: expect(...).toBeInTheDocument is not a function Stack: TypeError: expect(...).toBeInTheDocument is not a function at UserContext. (/Users/richiethomas/Desktop/Workspace/temp_react/teardown3/src/App.test.js:10:25) at at processImmediate (internal/timers.js:461:21)



From [this StackOverflow answer], it appears that `toBeInTheDocument` is part of the Jest framework, not `react-testing-library`.  Fair enough I change the missing function to RTL's `.toBeTruthy()` function, and the test now passes.

My question is: was there an issue with the way I followed [the instructions](https://jasmine.github.io/tutorials/react_with_npm) as they're currently written?  Luckily I was able to deduce the correct next steps from reading the error messages, but I worry that not everyone might have this same experience.  I'm guessing the disconnect here is due to the fact that `create-react-app` and `jasmine` are maintained by separate groups of people, and the (understandable) differences in design decisions and development direction that would result?  Is there an appetite for adding the above (or equivalent) solutions to some sort of `Troubleshooting` section to the Jasmine docs for folks who start their Jasmine journey with `create-react-app`?

## Are you creating an issue in the correct repository?

- This repository is for the Jasmine docs. If you aren't reporting a documentation problem, you're probably in the wrong place.
- When in doubt, create an issue in the [core Jasmine repo](https://github.com/jasmine/jasmine/issues).
- If you are using a test runner that wraps Jasmine, consider filing an issue with that library if appropriate:
  - [Jasmine npm](https://github.com/jasmine/jasmine-npm/issues)
  - [Jasmine gem](https://github.com/jasmine/jasmine-gem/issues)
  - [Jasmine py](https://github.com/jasmine/jasmine-py/issues)
  - [Gulp Jasmine Browser](https://github.com/jasmine/gulp-jasmine-browser/issues)
  - [Karma](https://github.com/karma-runner/karma/issues)
  - [Grunt Contrib Jasmine](https://github.com/gruntjs/grunt-contrib-jasmine/issues)

sgravrock commented 3 years ago

Thanks for the detailed write-up. We don't get a lot of feedback on the React tutorial, so this is very helpful.

If I understand correctly, it looks like there were two main things that went wrong:

You had some trouble translating commands from yarn to npm.
The React Testing Library documentation is written with Jest in mind, and there was nothing to warn you about the differences.

I've updated the tutorial to include npm commands as well as yarn and to point out the RTL documentation issue. Could you take a look and let me know if the updated doc would've worked better for you?

One other thing: The direct equivalent of yarn run jasmine is either npx jasmine or ./node_modules/.bin/jasmine (the two differ mainly in what they do when the package isn't there). If plain jasmine init works, that might mean that you have the jasmine npm package installed globally. If that's the case, be aware that the globally installed package version can get out of sync with the one you have installed locally in your project.

richiethomas commented 3 years ago

LGTM, thanks very much for including these changes, and for the easy toggle-ability between yarn and npm commands. I would have happily bought the suggestion that these changes more properly belong on the create-react-app repo, so I appreciate you making the effort here.

sgravrock commented 3 years ago

Thanks for the feedback.

jasmine / jasmine.github.io

Multiple error messages at various stages of following the Jasmine install instructions with a new React app (with suggested solutions included) #144