Jest.js 如果运行多个测试,使用store的模板组件将丢失上下文

7vux5j2d  于 2023-09-28  发布在  Jest
关注(0)|答案(1)|浏览(169)

模具存储:2.0.9
模板芯:4.0.2

当前行为

我已经实现了一个模具测试项目中的基本存储。每当我尝试在测试中设置存储值或重置它们时;测试丢失了上下文并且不能再找到组件。如果我只运行一个测试而不是两个测试,则不会有任何问题。

my-component.tsx

import { Component, State, h } from '@stencil/core';
import { store, onStoreChange } from '../../store/store';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
  @State() test = true;

  setTestState() {
    this.test = !this.test;
  }

  componentWillLoad() {
    onStoreChange('isActive', this.setTestState.bind(this));
  }

  render() {
    return <div>Hello, World! I'm</div>;
  }
}

my-component.spec.ts

import { newSpecPage } from '@stencil/core/testing';
import { MyComponent } from './my-component';
import { store } from '../../store/store';

describe('my-component', () => {
   afterEach(() => {
    store.dispose();
  });

  it('renders', async () => {
    const { root } = await newSpecPage({
      components: [MyComponent],
      html: '<my-component></my-component>',
    });

    store.state.isActive = false;

    expect(root).toEqualHtml(`
      <my-component>
        <mock:shadow-root>
          <div>
            Hello, World! I'm
          </div>
        </mock:shadow-root>
      </my-component>
    `);
  });
  
  it('renders', async () => {
    const { root } = await newSpecPage({
      components: [MyComponent],
      html: '<my-component></my-component>',
    });

    store.state.isActive = false;

    expect(root).toEqualHtml(`
      <my-component>
        <mock:shadow-root>
          <div>
            Hello, World! I'm
          </div>
        </mock:shadow-root>
      </my-component>
    `);
  });
});

store.ts

import { createStore } from '@stencil/store';

export interface StoreState {
  isActive: boolean;
}

const store = createStore<StoreState>({
  isActive: true
});

const onStoreChange = (key: keyof StoreState, cb: (value: string | boolean) => void): void => {
  store.onChange(key, (value: any) => {
    cb(value);
  });
};

export { store, onStoreChange };

当前错误TypeError: Cannot read properties of undefined (reading '$instanceValues$')

代码复制URL

https://github.com/pimmesz/stencil-test

8fsztsew

8fsztsew1#

我已经检查了你提供的代码,我相信问题是你在测试的afterEach()块中调用了store.dispose()。这将导致存储区在运行下一个测试之前被销毁。
要解决这个问题,您可以将对store.dispose()的调用移动到afterAll()块。这将确保在运行所有测试之前不会销毁存储。
下面是更新后的代码:

import { newSpecPage } from '@stencil/core/testing';
import { MyComponent } from './my-component';
import { store } from '../../store/store';

describe('my-component', () => {

  afterAll(() => {
    store.dispose();
  });

  it('renders', async () => {
    const { root } = await newSpecPage({
      components: [MyComponent],
      html: '<my-component></my-component>',
    });

    store.state.isActive = false;

    expect(root).toEqualHtml(`
      <my-component>
        <mock:shadow-root>
          <div>
            Hello, World! I'm
          </div>
        </mock:shadow-root>
      </my-component>
    `);
  });

  it('renders', async () => {
    const { root } = await newSpecPage({
      components: [MyComponent],
      html: '<my-component></my-component>',
    });

    store.state.isActive = false;

    expect(root).toEqualHtml(`
      <my-component>
        <mock:shadow-root>
          <div>
            Hello, World! I'm
          </div>
        </mock:shadow-root>
      </my-component>
    `);
  });
});

希望这对你有帮助!

相关问题