* chore: convert Jest examples to TypeScript
* test: use absolute imports in test files
* chore: address review comments
* fix: add pages to tsconfig.json paths
* fix: add styles to tsconfig.json paths
* chore: upgrade dependencies/snapshots
* docs: match Testing docs with example code
* docs: link to docs from mock test files
Co-authored-by: Lee Robinson <me@leerob.io>
It took me a while to work out that if using TypeScript with the `baseUrl` set to `.` (quite common) - then the tests fail as Jest can't find the modules.
Explicitly setting the `moduleDirectories`, as per the change to the config, fixes this issue.
## Documentation / Examples
- [x] Fixup commit
- [x] Make sure the linting passes by running `yarn lint`
Fixing a small typo in the sentence « It is recommend.. » about Playwright.
<!--
Thanks for opening a PR! Your contribution is much appreciated.
In order to make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below.
Choose the right checklist for the change that you're making:
-->
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Added Playwright to the top of the page and links to help readers jump to sections.
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
This PR:
Fixes a broken link in the testing documentation. It appears that the selector currently being used is `#test-environment-variable`. When clicked this results in the user being re-directed to the top of the environment variables page. The correct selector is: `#test-environment-variables`
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
…/image` Error
While learning how to test next.js applications I came across this error when testing components using next/image with an image import
eg:
```
// /quiz-hero
import Image from 'next/image';
import quizImage from '../../public/undraw-quiz.svg';
// In render
<Image
height='91'
width='198'
layout='fixed'
src={quizImage}
alt='QuizImage'
/>
```
### Error ->
Failed to parse src "test-file-stub" on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)
This is fixed by adding a "/" to the beginning of your file-stub module export string.
This is not an error when you're awaiting an image using async waitFor, But comes up as an error when you're testing a component that holds another component with a "next/image" import.
eg:
```
// quizHero.test.tsx works like this without change.
const image = await waitFor(() => screen.findByAltText('QuizImage'));
// but index.test.tsx fails rendering the homepage without the change.
render(<Home />); // Error: Failed to parse src "test-file-stub" on `next/image`...
// with change to __mocks__/fileMock
quizHero.test.tsx //test pass
index.test.tsx //test pass
```
<!--
Thanks for opening a PR! Your contribution is much appreciated.
In order to make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below.
Choose the right checklist for the change that you're making:
-->
## Bug
possibly related to -> #26749
## Feature
- [X] Documentation added
## Documentation / Examples
- [X] Make sure the linting passes
* The previous `npm run jest` command did not match up with the testing script added to the example `package.json`
* Fixes#29777
## Bug
- [x] Related issues linked using `fixes #number`
- [N/A] Integration tests added
- [N/A] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes
This PR updates the with-jest example to the latest version of Jest and adds a note about the Jest and RTL testing environments (related to this [discussion](https://github.com/vercel/next.js/discussions/28337)). Also adds minor tweaks to the testing docs.
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [x] Make sure the linting passes
* Use recommended pattern in testing example
Since the official linter for testing library, `eslint-plugin-testing-library` recommends using `screen` to write queries, this MR updates the testing library example to follow the pattern recommended by the linter.
> DOM Testing Library (and other Testing Library frameworks built on top of it) exports a screen object which has every query (and a debug method). This works better with autocomplete and makes each test a little simpler to write and maintain.
> This rule aims to force writing tests using built-in queries directly from screen object rather than destructuring them from render result. Given the screen component does not expose utility methods such as rerender() or the container property, it is correct to use the render returned value in those scenarios.
See the `prefer-screen-queries` rules docs for more info: https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/prefer-screen-queries.md
* Update devDependencies
* Install and configure test linting
* Use recommended pattern in test
* Update test names for consistency
* Update docs
* Set jest environment in each file
* Use root true in `with-jest` eslint config
* Ensure nested .eslintrcs are not loaded for repo lint
Co-authored-by: jj@jjsweb.site <jj@jjsweb.site>
@leerob
This pull request points to our [Cypress GitHub Actions Guide](https://on.cypress.io/github-actions) in the Cypress Documentation site. It contains a guided walkthrough of using GitHub Actions with Cypress in text and our [recently released videos](https://on.cypress.io/ci-gha-playlist) in context.
## Documentation / Examples
- [x] Make sure the linting passes
Removed "`" with "'".
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [x] Make sure the linting passes
This PR adds a recommendation to test production code with Cypress and re-orders the page information.
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [x] Make sure the linting passes
Add a new doc showing how to configure Jest and Cypress with Next.js
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [x] Make sure the linting passes
