How to use where clause in Knex
Create refunds with Stripe
Load HTML with Cheerio
How to send POST request with Axios
Find intersection of array in Lodash
Powered by Official white Bloop logo with a period

Terms / Privacy / Search / Support

  • beforeEach(() => {
      fixture = TestBed.configureTestingModule({
        declarations: [AboutComponent, HighlightDirective],
        schemas: [CUSTOM_ELEMENTS_SCHEMA],
      }).createComponent(AboutComponent);
      fixture.detectChanges(); // initial binding
    });
    
    it("should have skyblue 

    ", () => { const h2: HTMLElement = fixture.nativeElement.querySelector("h2"); const bgColor = h2.style.backgroundColor; expect(bgColor).toBe("skyblue"); });

    Docs
    0
  • let masterService: MasterService;
    let valueServiceSpy: jasmine.SpyObj;
    
    beforeEach(() => {
      const spy = jasmine.createSpyObj("ValueService", [
        "getValue",
      ]);
    
      TestBed.configureTestingModule({
        // Provide both the service-to-test and its (spy) dependency
        providers: [
          MasterService,
          { provide: ValueService, useValue: spy },
        ],
      });
      // Inject both the service-to-test and its (spy) dependency
      masterService = TestBed.inject(MasterService);
      valueServiceSpy = TestBed.inject(
        ValueService
      ) as jasmine.SpyObj;
    });
    
    Docs
    0
  • let service: ValueService;
    
    beforeEach(() => {
      TestBed.configureTestingModule({
        providers: [ValueService],
      });
    });
    
    Docs
    0
  • beforeEach(() => {
      fixture = TestBed.configureTestingModule({
        declarations: [HighlightDirective, TestComponent],
      }).createComponent(TestComponent);
    
      fixture.detectChanges(); // initial binding
    
      // all elements with an attached HighlightDirective
      des = fixture.debugElement.queryAll(
        By.directive(HighlightDirective)
      );
    
      // the h2 without the HighlightDirective
      bareH2 = fixture.debugElement.query(
        By.css("h2:not([highlight])")
      );
    });
    
    // color tests
    it("should have three highlighted elements", () => {
      expect(des.length).toBe(3);
    });
    
    it('should color 1st 

    background "yellow"', () => { const bgColor = des[0].nativeElement.style.backgroundColor; expect(bgColor).toBe("yellow"); }); it("should color 2nd

    background w/ default color", () => { const dir = des[1].injector.get( HighlightDirective ) as HighlightDirective; const bgColor = des[1].nativeElement.style.backgroundColor; expect(bgColor).toBe(dir.defaultColor); }); it("should bind background to value color", () => { // easier to work with nativeElement const input = des[2].nativeElement as HTMLInputElement; expect(input.style.backgroundColor).toBe( "cyan", "initial backgroundColor" ); input.value = "green"; // Dispatch a DOM event so that Angular responds to the input value change. // In older browsers, such as IE, you might need a CustomEvent instead. See // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill input.dispatchEvent(new Event("input")); fixture.detectChanges(); expect(input.style.backgroundColor).toBe( "green", "changed backgroundColor" ); }); it("bare

    should not have a customProperty", () => { expect(bareH2.properties.customProperty).toBeUndefined(); });

    Docs
    0
  • beforeEach(() => {
      TestBed.configureTestingModule({
        providers: [ValueService],
      });
      service = TestBed.inject(ValueService);
    });
    
    Docs
    0
  • beforeEach(() => {
      fixture = TestBed.configureTestingModule({
        declarations: [AboutComponent, HighlightDirective],
        schemas: [CUSTOM_ELEMENTS_SCHEMA],
      }).createComponent(AboutComponent);
      fixture.detectChanges(); // initial binding
    });
    
    it("should have skyblue 

    ", () => { const h2: HTMLElement = fixture.nativeElement.querySelector("h2"); const bgColor = h2.style.backgroundColor; expect(bgColor).toBe("skyblue"); });

    Docs
    0
  • beforeEach(() => {
      fixture = TestBed.configureTestingModule({
        declarations: [HighlightDirective, TestComponent],
      }).createComponent(TestComponent);
    
      fixture.detectChanges(); // initial binding
    
      // all elements with an attached HighlightDirective
      des = fixture.debugElement.queryAll(
        By.directive(HighlightDirective)
      );
    
      // the h2 without the HighlightDirective
      bareH2 = fixture.debugElement.query(
        By.css("h2:not([highlight])")
      );
    });
    
    // color tests
    it("should have three highlighted elements", () => {
      expect(des.length).toBe(3);
    });
    
    it('should color 1st 

    background "yellow"', () => { const bgColor = des[0].nativeElement.style.backgroundColor; expect(bgColor).toBe("yellow"); }); it("should color 2nd

    background w/ default color", () => { const dir = des[1].injector.get( HighlightDirective ) as HighlightDirective; const bgColor = des[1].nativeElement.style.backgroundColor; expect(bgColor).toBe(dir.defaultColor); }); it("should bind background to value color", () => { // easier to work with nativeElement const input = des[2].nativeElement as HTMLInputElement; expect(input.style.backgroundColor).toBe( "cyan", "initial backgroundColor" ); input.value = "green"; // Dispatch a DOM event so that Angular responds to the input value change. // In older browsers, such as IE, you might need a CustomEvent instead. See // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill input.dispatchEvent(new Event("input")); fixture.detectChanges(); expect(input.style.backgroundColor).toBe( "green", "changed backgroundColor" ); }); it("bare

    should not have a customProperty", () => { expect(bareH2.properties.customProperty).toBeUndefined(); });

    Docs
    0
  • it("should use ValueService", () => {
      service = TestBed.inject(ValueService);
      expect(service.getValue()).toBe("real value");
    });
    
    Docs
    0
  • let masterService: MasterService;
    let valueServiceSpy: jasmine.SpyObj;
    
    beforeEach(() => {
      const spy = jasmine.createSpyObj("ValueService", [
        "getValue",
      ]);
    
      TestBed.configureTestingModule({
        // Provide both the service-to-test and its (spy) dependency
        providers: [
          MasterService,
          { provide: ValueService, useValue: spy },
        ],
      });
      // Inject both the service-to-test and its (spy) dependency
      masterService = TestBed.inject(MasterService);
      valueServiceSpy = TestBed.inject(
        ValueService
      ) as jasmine.SpyObj;
    });
    
    Docs
    0
  • beforeEach(() => {
      TestBed.configureTestingModule({
        providers: [ValueService],
      });
      service = TestBed.inject(ValueService);
    });
    
    Docs
    0
  • const handler = jest.fn();
    
    const {
      container: { firstChild: input },
    } = render();
    
    fireEvent.input(input, { target: { value: "a" } });
    
    expect(handler).toHaveBeenCalledTimes(1);
    
    Docs
    0
  • const ref = createRef();
    const spy = jest.fn();
    
    render(
      h(elementType, {
        onDblClick: spy,
        ref,
      })
    );
    
    fireEvent["onDblClick"](ref.current);
    
    expect(spy).toHaveBeenCalledTimes(1);
    
    Docs
    0
  • const { getByLabelText, queryAllByTestId } =
      render(Component);
    
    Docs
    0
  • // With options.
    const { results } = render(YourComponent, {
      target: MyTarget,
      props: { myProp: "value" },
    });
    
    // Props only.
    const { results } = render(YourComponent, {
      myProp: "value",
    });
    
    Docs
    0
  • const cb = jest.fn();
    
    
    function Counter() {
      useEffect(cb);
    
    
      const [count, setCount] = useState(0);
    
    
      return ;
    }
    
    
    const { container: { firstChild: buttonNode }, } = render();
    
    
    // Clear the first call to useEffect that the initial render triggers.
    cb.mockClear();
    
    
    // Fire event Option 1.
    fireEvent.click(buttonNode);
    
    
    // Fire event Option 2.
    fireEvent(
    buttonNode,
    new Event('MouseEvent', {
      bubbles: true,
      cancelable: true,
      button: 0,
    });
    
    
    expect(buttonNode).toHaveTextContent('1');
    expect(cb).toHaveBeenCalledTimes(1);
    Docs
    0
  • const table = document.createElement("table");
    
    const { container } = render(TableBody, {
      props,
      container: document.body.appendChild(table),
    });
    
    Docs
    0
  • const { getByDataCy } = render();
    
    expect(getByDataCy("my-component")).toHaveTextContent(
      "Hello"
    );
    
    Docs
    0
  • test("has correct welcome text", () => {
      render();
      expect(screen.getByRole("heading")).toHaveTextContent(
        "Welcome, John Doe"
      );
    });
    
    Docs
    0
  • render();
    
    Docs
    0
  • test("handles click correctly", () => {
      render();
    
      userEvent.click(screen.getByText("Check"));
      expect(screen.getByLabelText("Check")).toBeChecked();
    });
    
    Docs
    0
  • // Example, a function to traverse table contents
    import * as tableQueries from "my-table-query-library";
    import { queries } from "@testing-library/react";
    
    const { getByRowColumn, getByText } = render(, {
      queries: { ...queries, ...tableQueries },
    });
    
    Docs
    0
  • test("has correct input value", () => {
      render();
      expect(screen.getByRole("form")).toHaveFormValues({
        firstName: "John",
        lastName: "Doe",
      });
    });
    
    Docs
    0
  • const table = document.createElement("table");
    
    const { container } = render(, {
      container: document.body.appendChild(table),
    });
    
    Docs
    0
  • // @testing-library/react
    const { container } = render();
    const foo = container.querySelector('[data-foo="bar"]');
    
    Docs
    0
  • const { getByLabelText, queryAllByTestId } = render(
      
    );
    
    Docs
    0
  • // test-utils.js
    const domTestingLib = require("@testing-library/dom");
    const { queryHelpers } = domTestingLib;
    
    export const queryByTestId =
      queryHelpers.queryByAttribute.bind(null, "data-test-id");
    export const queryAllByTestId =
      queryHelpers.queryAllByAttribute.bind(
        null,
        "data-test-id"
      );
    
    export function getAllByTestId(container, id, ...rest) {
      const els = queryAllByTestId(container, id, ...rest);
      if (!els.length) {
        throw queryHelpers.getElementError(
          `Unable to find an element by: [data-test-id="${id}"]`,
          container
        );
      }
      return els;
    }
    
    export function getByTestId(...args) {
      // result >= 1
      const result = getAllByTestId(...args);
      if (result.length > 1) {
        throw queryHelpers.getElementError(
          `Found multiple elements with the [data-test-id="${id}"]`,
          container
        );
      }
      return result[0];
    }
    
    // re-export with overrides
    module.exports = {
      ...domTestingLib,
      getByTestId,
      getAllByTestId,
      queryByTestId,
      queryAllByTestId,
    };
    
    Docs
    0
  • Powered by Official black Bloop logo with a period
    download the IDE extension

    View other examples