Code to accompany "Testing React with Jest and Testing Library" course on Udemy
Home Page: https://www.udemy.com/course/react-testing-library/?couponCode=TEST-LIB-GITHUB
License: GNU Affero General Public License v3.0
Code to accompany React Testing Library and Jest course on Udemy.
I think using .set method will be still be mutation. If you want to change nested value in an object you have to make copy at each level
The lecture cannot be played.
I can't play Udemy's lectures. Not just one lecture, but not many.
I contacted Udemy, but it doesn't work.
I'm sorry for leaving such a post on github, but I want to listen to the lecture.
https://www.udemy.com/course/jest-testing-library/learn/lecture/31621622#questions
I think we should make a util function in which if we pass scoops and toppins count, that should return the final amount.
It can be seperatly tested like we tested color converting function.
The problem with the calculation of price in context is our state isn't minimal.
Please add proper read.md file, I wamt to start my final exam, that direcotry don't have any package.json, i can't even start it using npm install.
Please guide
hello. @bonnie ! I'm working on popover testing in section 4 right now.
However, userEvent.click(someElement) is not executed when it is executed like the code in the lecture.
test('Initial conditions', () => {
render(<SummaryForm />);
const checkbox = screen.getByRole('checkbox', {
name: /terms and conditions/i,
});
//find Checkbox
expect(checkbox).not.toBeChecked();
const confirmButton = screen.getByRole('button', { name: /confirm order/i });
expect(confirmButton).toBeDisabled();
});
test('Checkbox disables button on first click and enables on second click', () => {
render(<SummaryForm />);
const checkbox = screen.getByRole('checkbox', {
name: /terms and conditions/i,
});
const confirmButton = screen.getByRole('button', { name: /confirm order/i });
userEvent.click(checkbox);
expect(confirmButton).toBeEnabled();
userEvent.click(checkbox);
expect(confirmButton).toBeDisabled();
});After digging a little further into the documentation, I found that with asynchronous test execution, I had to do userEvent.click with userEvent.setup() before rendering the component.
userEventWe recommend invoking [userEvent.setup()](https://testing-library.com/docs/user-event/setup) before the component is rendered. This can be done in the test itself, or by using a setup function. We discourage rendering or using any userEvent functions outside of the test itself - e.g. in a before/after hook - for reasons described in "Avoid Nesting When You're Testing"
import { render, screen } from '@testing-library/react';
import SummaryForm from '../SummaryForm';
import userEvent from '@testing-library/user-event';
test('Initial conditions', () => {
render(<SummaryForm />);
const checkbox = screen.getByRole('checkbox', {
name: /terms and conditions/i,
});
//find Checkbox
expect(checkbox).not.toBeChecked();
const confirmButton = screen.getByRole('button', { name: /confirm order/i });
expect(confirmButton).toBeDisabled();
});
test('Checkbox disables button on first click and enables on second click', async () => {
const user = userEvent.setup();
render(<SummaryForm />);
const checkbox = screen.getByRole('checkbox', {
name: /terms and conditions/i,
});
const confirmButton = screen.getByRole('button', { name: /confirm order/i });
await user.click(checkbox);
expect(confirmButton).toBeEnabled();
await user.click(checkbox);
expect(confirmButton).toBeDisabled();
});I'm wondering if the lecture needs an update or if I'm doing something wrong.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.