使用JEST测试DOM

Question

我正在尝试编写单元测试以测试页面上模态的呈现。单击元素时，我正在更改变量的值。我试图调用一个函数并进行了测试，但是错误是相同的。在测试时，我得到的值是未定义的。这些是文件：

.TSX文件-

@Component({
  tag: 'dxp-country-language-selector',
  styleUrls: ['dxp-country-language-selector.css'],
  shadow: false
})
export class CountryLanguageSelector {
  @Prop({ mutable: true }) contentData: CountryLanguageSelectorModel;
  @Prop({ mutable: true }) contentPath: string;
  @Prop({ mutable: true }) contentUrl: string;
  @Prop({ mutable: true }) modalView: boolean;
  @Prop({ mutable: true }) selectedCountry: string;
  @Prop({ mutable: true }) selectedLanguage: string;
  @Event() countrySelected: EventEmitter;
  @Event() languageSelected: EventEmitter;

  countrySelectedHandler (selectedCountry) {
    this.selectedCountry = selectedCountry.target.value;
    this.countrySelected.emit(selectedCountry.target.value);
  }

  languageSelectedHandler (selectedLanguage) {
    this.selectedLanguage = selectedLanguage.target.value;
    this.languageSelected.emit(selectedLanguage.target.value);
  }


  render () {
    if (this.contentData) {
      return (
        <div>
          <div id="country-selector" class="country-selector primary-light" onClick={() => { this.modalView = true }}>
            <div class="wrapper">
              <p class="globe-wrapper"></p>
              <a href="#." class="clang-selector" role="button" aria-disabled="false"><span
                class="country">{this.selectedCountry}
                <span class="down-arrow"></span>
            </span><span class="lang small">{this.selectedLanguage}</span></a>
            </div>
          </div>
          { this.modalView ?
            <div class="modal main-section col-12 visible" id="modal">
              <div class="modal-dialog col-xl-8 col-lg-8 col-md-10 primary-light">
                <div class="modal-header">
                <span class="btn-close" id="closeBtn"
                      onClick={() => this.modalView = false}><span
                  class="icon icon-close"></span></span>
                </div>
                <div class="modal-body">
                  <p><a href="" aria-label="go to">
                    {/*<span class="mastercard-logo"></span>*/}
                    <img src={this.contentData.imageUrl} alt={this.contentData.imageAlternateText}></img>
                  </a></p>
                  <h5>{this.contentData.title}</h5>
                  <p>{this.contentData.subtitle}</p>
                  <div id="country">
                    <div>Country</div>
                    <select title="Select your country" aria-label="Select your country"
                            onInput={event => this.countrySelectedHandler(event)}>
                      {this.contentData.countryList.map(country =>
                        <option>{country}</option>
                      )}
                    </select>
                  </div>
                  <p></p>
                  <div id="lang">
                    <div>Language</div>
                    <select title="Select your language" aria-label="Select your language"
                            onInput={event => this.languageSelectedHandler(event)}>
                      {this.contentData.languageList.map(language =>
                        <option>{language}</option>
                      )}
                    </select>
                  </div>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-cta btn-brick" id="go-back"
                          onClick={() => this.modalView = false}>{this.contentData.buttonText}</button>
                </div>
              </div>
            </div> : '' }
        </div>
      )
    }
  }
}

测试文件-

import { CountryLanguageSelector } from './dxp-country-language-selector'

let obj = new CountryLanguageSelector();
describe('rendering', () => {
  let element: HTMLElement;
  let testWindow: TestWindow;
  beforeEach(async () => {
    obj = new CountryLanguageSelector();
    testWindow = new TestWindow();
    element = await testWindow.load({
      components: [CountryLanguageSelector],
      html: '<dxp-country-language-selector></dxp-country-language-selector>'
    });
  });

  it('should show modal on click', () => {
    obj.modalView = true;
    const countrySelector: HTMLElement = element.querySelector('#country-selector');
    countrySelector.click();
    expect(countrySelector.classList).toContain('visible');
  });
});