Code Monkey home page Code Monkey logo

react-testing-library-course's Introduction


Course material for testing React components using react-testing-library

  • react-dom.js - Render a React component for testing
  • jest-dom.js - Use jest-dom for improved assertions
  • dom-testing-library.js - Use dom-testing-library to write more maintainable React tests
  • react-testing-library.js - Use react-testing-library to render and test React Components
  • localized.js - Testing localized content with react-testing-library
  • state.js - Test React Component state changes with react-testing-library
  • prop-updates.js - Test prop updates with react-testing-library
  • a11y.js - Test accessibility of rendered React Components with jest-axe
  • dependency-injection.js - Mock HTTP Requests with Dependency Injection in React Component Tests
  • http-jest-mock.js - Mock HTTP Requests with jest.mock in React Component Tests
  • mock-component.js - Mock react-transition-group in React Component Tests with jest.mock
  • error-boundaries.js - Test componentDidCatch handler error boundaries with react-testing-library
  • tdd-markup.js - Test drive the development of a React Form with react-testing-library
  • tdd-functionality.js - TDD the functionality of a React Form with react-testing-library
  • react-router.js - Test react-router Provider history object in React Component Tests with createMemoryHistory
  • redux.js - Test a redux connected React Component
  • custom-hook.js - Test a custom hook
  • portals.js - Test React portals
  • unmounting.js - Test Unmounting a React Component with react-testing-library
  • app.js - Testing the full application.

Note: the setup for this project uses kcd-scripts. Don't worry about that. You can learn about how to configure jest properly in the "Configure Jest for Testing JavaScript Applications" module of TestingJavaScript.com

react-testing-library-course's People

Contributors

abereghici avatar allcontributors[bot] avatar aprillion avatar gavrielrh avatar jdorfman avatar kentcdodds avatar liamse avatar lsminter avatar michaeldeboey avatar opauloh avatar zacjones93 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-testing-library-course's Issues

Testing configuration runs slow on Windows 10

Hi,

I purchased the course and didn't change any of the setup, but the test run really slow (3-6s). I use Windows 10 and saw that someone else filed this issue: jestjs/jest#7631. I commented there as well describing my issue in more details, but I don't see much of an activity towards resolving it. Is there a fix that you know of?

Thanks!

Linter complaining on course code

The kcd-scripts linter has these warnings:

Use screen to query DOM elements, screen.getByText eslint(testing-library/prefer-screen-queries)
Use screen to query DOM elements screen.queryByRole eslint(testing-library/prefer-screen-queries)

Also complains on the usage of debug() during on the course code.

It's difficult for people who are new to testing to discern screen, especially this happens in the course code where screen is not part of the topics discussed (not sure if it's part of the future topics as I'm still in the middle part of the videos).
It's also normal to use debug() while learning so I think it shouldn't warn.

Quick question: Not updated to use "screen"?

Hi @kentcdodds!

I'm watching the course and so far I'm loving it, thanks for it!

I have a quick question. You mentioned in your "Common mistakes with React Testing Library" post that we should stop destructuring queries from render, and instead use screen.

Is it safe to assume then that everytime you destructure queries like this...

const {getByLabelText, getByRole} = render(<FavoriteNumber />)

...we should get rid of that and use screen?

Thanks!

Portals

Show how to test components that use React portals.

jest-axe not catching inaccessible forms

Hey Kent!

Been going through your course and am really loving it. I was writing a test today to check the accessibility of a form I new wasn't accessible to begin with, but was surprised that it passed the test. I checked in this repo as well to find the same thing. If you check the a11y.js file, the following test will pass:

test('accessible forms pass axe', async () => {
  const {container} = render(<InaccessibleForm />)
  expect(await axe(container)).toHaveNoViolations()
})

Any idea why? I looked into the issue for a minute online but can't seem to find anyone else experiencing this issue.

Disabling Animations Instead of Mocking

In the mock-component test you use the following snippet in order to essentially disable transitions.

jest.mock('react-transition-group', () => {
  return {
    CSSTransition: props => (props.in ? props.children : null),
  }
})

However, there seems to be a more idiomatic way

import { config } from 'react-transition-group

config.disabled = true

And I was curious if this was intentionally avoided? Or what are your thoughts on doing the 2nd method in tests instead?

Should we use npm or yarn?

It seems that we should use npm as there is no yarn.lock file in this repo. However, npm install didn't work for me so I couldn't run the tests.
After executing yarn install I could run npm test [file_name]

DIfferent versions of Jest

I have a CRA created app that I tried to install Jest as per the package.json in the course but when I install it an subsequently run the tests I get:

PS C:\Users\RKevi\source\repos\GreatState\GreatState\ClientApp> yarn test
yarn run v1.22.4
$ cross-env CI=true react-scripts test --env=jest-environment-jsdom-sixteen --coverage

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "jest": "24.9.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of jest was detected higher up in the tree:

  C:\Users\RKevi\source\repos\GreatState\GreatState\ClientApp\node_modules\jest (version: 26.1.0)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "jest" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if C:\Users\RKevi\source\repos\GreatState\GreatState\ClientApp\node_modules\jest is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls jest in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed jest.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I tried the suggestions in the error list and indeed found multiple dependencies. Running 'yarn why jest' gives me:

PS C:\Users\RKevi\source\repos\GreatState\GreatState\ClientApp> yarn why jest
yarn why v1.22.4
[1/4] Why do we have the module "jest"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "react-scripts" depends on it
   - Hoisted from "react-scripts#jest"
info Disk size without dependencies: "100KB"
info Disk size with unique dependencies: "3.69MB"
info Disk size with transitive dependencies: "86.24MB"
info Number of shared dependencies: 273
=> Found "kcd-scripts#[email protected]"
info This module exists because "kcd-scripts" depends on it.
Done in 3.80s.

So based on my understanding (which is limited) it seems that kcd-scripts is referencing the latest Jest and react-scripts is referencing an earlier one. It seems that I need to update react-scripts dependency but I am not sure how.

If I try just using kcd-scripts I get a number of errors in the tests but I don't see any explanation. Errors mainly about toBeInTheDocument not a function

TypeError: expect(...).toBeInTheDocument is not a function
Thank you.

Kevin

Running the application gives an exception

I am running my application and getting an exception

$ kcd-scripts start
C:\Users\RKevi\source\repos\GreatState\GreatState\ClientApp\node_modules\kcd-scripts\dist\run-script.js:60
    throw new Error(`Unknown script "${script}".`);
    ^

Error: Unknown script "start".
    at spawnScript (C:\Users\RKevi\source\repos\GreatState\GreatState\ClientApp\node_modules\kcd-scripts\dist\run-script.js:60:11)
    at Object.<anonymous> (C:\Users\RKevi\source\repos\GreatState\GreatState\ClientApp\node_modules\kcd-scripts\dist\run-script.js:12:3)
    at Module._compile (internal/modules/cjs/loader.js:1200:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
    at Module.load (internal/modules/cjs/loader.js:1049:32)
    at Function.Module._load (internal/modules/cjs/loader.js:937:14)
    at Module.require (internal/modules/cjs/loader.js:1089:19)
    at require (internal/modules/cjs/helpers.js:73:18)
    at Object.<anonymous> (C:\Users\RKevi\source\repos\GreatState\GreatState\ClientApp\node_modules\kcd-scripts\dist\index.js:16:1)
    at Module._compile (internal/modules/cjs/loader.js:1200:30)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

There is something missing from the configuration that makes the script available.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.